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最新 規格 対応 の 
増補 改訂 版 ! 


いま や Web に と っ て 欠か せな い 基 幹 技術 に 
な っ た JavaScript。 従 来 は Web ペ ー ジ に 簡単 な 
動き を つけ る な ど 限 定 的 な 用 途 に と ど ま っ て いま 
し た が 、HTML5 の 登場 に よっ て 、 ド キュ メン ト の 
制御 、 よ り イ ンタ ラク ティ ブ な UI、 動 画 や 音楽 、 
Web ア プリ 、 ス マー ト フ ォ ン アプ リ な ど 、 高 度 な 
実装 が 行なえ る よう に な り ま し た 。 

本 書 「JavaScript 辞 典 第 4 版 ] は 、 や り た い 
こと か ら 引 ける 目的 別 分 類 と フル カラ ー の 見 や す 
い 紙 面 は その まま に 、 Canvas、 メ ディ ア 要 素 、 フ ァ 
イル 操作 、 オ フラ イン 処理 、 位 置 情 報 な ど 、 モ 
ダン な Web サ イト や アプ リ 制 作 に 必須 の HTML5 
AP 対応 項目 を 大 幅 に 増補 し まし た 。IE10 な ど 最 
新 ブラ ウザ や i0S / Android 環 境 の 対応 状況 も 掲 
載 し て いま す 。 

基礎 文法 の 解説 や 、 オ ブ ジ ェクト 別 の イベ ン 
ト ・ プ ロ パ ティ ・ メ ソ ッ ド 一 覧 も 収録 し て お り 、 
紙面 の サン プル ソー ス は Web か ら ダ ウン ロー ド が 
可能 で す 。 学 習 で も 現場 で も 使え る 、 お 役立ち 
の 1 冊 で す 。 


AV8 


SCHI 上 
本 典 ms。。 


ゃ 人 


(UMHIII 












| 





HTML 


SHOEISHA 





本 書 内 容 に 関す る お 問い 合わ せ に つい て 


この た び は 翔 涼 社 の 書籍 を お 買い 上 げ い た だ き 、 誠 に あり が と う ご ざ いま す 。 英 社 で は 、 読 者 の 皆様 か 
ら の お 問い 合わ せ に 適切 に 対応 させ て いた だ く た め 、 以 下 の ガ イド ライ ン へ の ご 協力 を お 願い 致し て お 
り ま す 。 下記 項目 を お 読み いた だ き 、 手 順に 従っ て お 問い 合わ せく だ さい 。 


人 @ ご 質問 され る 前 に 
弊社 Web サ イト の 「 正 誤 表 」 を ご 参照 くだ さい 。 こ れ ま で に 判明 し た 正誤 や 追加 情報 を 掲載 し て いま す 。 
正誤 表 http://www.shoeisha.cojp/book/errata/ 
人 @ ご 質問 方 法 


弊社 Web サ イト の 「 出 版 物 Q&A」 を ご 利用 くだ さい 。 
出版 物 Q&A http://wwwr.shoeisha.cojp/book/qa/ 


イン ター ネッ ト を ご 利用 で な い 場 合 は 、FAX ま た は 郵便 に て 、 下 記 “ 翔 泳社 愛読 者 サー ビス セン ター" 
まで お 問い 合わ せく だ さい 。 
電話 で の ご 質問 は 、 お 受け し て お り ま せん 。 


回 答 に つい て 
回 答 は 、 ご 質問 いた だ いた 手段 に よっ て ご 返事 申し 上 げ ま す 。 ご 質問 の 内 容 に よっ て は 、 回 答 に 数 日 
な いし は それ 以上 の 期間 を 要する 場合 が あり ます 。 


人 @ ご 質問 に 際 し て の ご 注意 
本 書 の 対象 を 越え る も の 、 記 述 個所 を 特定 され な いも の 、 ま た 読者 固有 の 環境 に 起因 する ご 質問 等 に 
は お 答え で きま せん の で 、 予 め ご 耳 承 くだ さい 。 


郵便 物 送 付 先 お よび FAX 番号 
送付 先住 所 〒160-0006 東京 都 新宿 区 舟町 5 
FAX 番号 03.5362.3818 
宛先 (株 ) 翔 泳社 愛読 者 サー ビス セン ター 係 


※ 本 書 に 記載 され た URL 等 は 予告 な く 変更 され る 場合 が あり ます 。 

※ 本 書 の 対象 に 関す る 詳細 は xiv ペ ー ジ の 「 本 書 の 動作 環境 ] を ご 参照 くだ さい 。 

※ 本 書 の 出版 に あたっ て は 正確 な 記述 に つと め ま し た が 、 著 者 や 出版 社 な どの いずれ も 、 本 書 の 内 容 に 対し て な ん 
ら か の 保証 を する も の で は な く 、 内 容 や サン ブル に 基づく いか な る 運用 結果 に 関し て も いっ さい の 次 任 を 負い ま 
せん 。 

※ 本 書 に 掲載 され て いる サン プル プロ グラ ム や スク リプ ト 、 お よび 実行 結果 を 記し た 画面 イオ メー ジ な ど は 、 特 定 の 
設定 に 基づい た 環境 に て 再現 され る 一 例 で す 。 

※ 本 書 に 記載 され た 内 容 は 、2012 年 12 月 段階 で 策定 され た 最新 の 仕様 と 、2013 年 5 月 現在 の プラ ウザ 対応 状況 に も 
と づい て 執筆 され て いま す 。 仕様 、 プ ラウ ザ 対 応 状 況 、 そ の 他 は 今後 も 変更 され る こと が 予想 され ます 。 ご 丁 承 
くだ さい 。 


※ 本 書 に 記載 され て いる 会 社名 、 製 品名 は それ ぞ れ 各社 の 商標 お よび 登録 商標 で す 。 
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JavaScript と は ai る 1 の まる ie POCCCCCCEPCLCLPCCPKPCEYEPPPPCFPLPPECEPICHPHYTEYLTI 
JavaScript の 組み 込み 方 POPPPCHEPPPPCPPLYPPPPPPPPPPCPPPPPPPPTPPYYPPPPPYTPYYYYYPYYEYYYYYYYYYY 
JavaScript 記 述 の 注意 点 … ii 
javaScript に お ける 色 の 指定 …… ド iiiro 
オブ ジェ クト 、 プロパ ティ 、 メ ソ ッ ド 
イベ ント 
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オブ ジェ ク ト を 扱う ANANeiSa EAIG Bee も 9 の で ORP 
関数 人 099812SCSD ダ I319 の 3 ど 3 の の ERR 


第 2 部 javaScript リ ファ レン ス 049 





く < く ダ イア ログ > 


01 
02 
03 


警告 ダイ アロ グ を 表示 し た い dieNieNSimaeieeAH テ EEIS4mIRIKe2hwSeeia aisanet2meaye2orrrtiktki 
確認 ダイ アロ グ を 表示 し た い iTM EMIrba ゲ MVS で IrAr2i90aiai igiatSrSiS で な は 2 に an 
文字 入力 ダイ アロ グ を 使い た い 





SAMPE1 ダイ ア 回 グ を 表示 する に oooeeeheeeeenee 


く ド キュ メン ト > 
01 ドキ ュ メ ン ト を 扱い た い 本 で も あ ダ P の 2 いら DLS XP OPECKECYICZTCLYOOEK2GKD 
02 ドキ ュ メ ント を オー プン / ク ロー ズ し た い 
03 文字 列 や 画像 を 表示 し た い ………ーーー 
04 最終 更新 日 を 自動 的 に 挿入 し た い ………… 
05 ドメイン 名 を 参照 し た い … 

06 ドキ ュ メ ント の タイ トル を 参照 し た い 
07 選択 され て いる 文字 列 を 調べ た い 

08 クッ キー を 使い た い ・ 

09 アプ レッ ト や プラ グイ ン を 参照 し た い 
SAMPLE 1 文字 や 画像 を 表示 する 
SAMPLE 2 ドメイン 情報 を 取得 する ……… 
SAMPLE3 選択 され て いる 文字 列 を 調べ る 
SAMPLE 4 クッ キー を 使う ai 





< ウィ ンド ウ > 

01 新しい ウィ ンド ウ を 開き た い 951PNNsit な BYGISR2 が BORNga 計 iiG35 向 6 074 
02 ウィ ンド ウ を 閉じ た い ir お aeta 語 お 2 だ きす 57 が 7 だま S き gh SS -076 
03 別 の ウイ ンド ウ を 操作 し た U…ー ド ド ピロー ドド ドー の 077 
04 ウィ ンド ウ の 位置 を 指定 し た い - が Id TMPCUEY か 078 
06 ウィ ンド ウ の サイ ズ を 調べ た い が で る IRCE ED Ia ele 08: 3RIS7P 080 
07 ペー ジ を スク ロー ル さ せ た い | ceozig rt081 
08 ドキ ュ メ ント の 端 か ら の 位置 を 参照 設定 し た い ……………………ー…082 
09 ブラ ウザ の ボタ ン と 同様 の 処理 を し た い BPRXIOHRSO で OPC て ICO た "ZTT 083 
10 イン ライ ン フ レー ム を 参照 し た い …… じ [… ド じ (ドー… 27 で 2 084 
SAMPLE 1 別 の ウィ ンド ウ を 操作 する ーー ドド ドド ドーooooeeeno 085 
SAMPLE 2 ウィ ンド ウ の 位置 と サイ ズ を 指定 する RE 089 
SAMPLE 3 ブラ ウザ の ボタ ン と 同様 の 処理 を する ……………………………092 
SAMPLE 4 イン ライ ン フ レー ム を 操作 する … つ ー ド ドー ドド oomeer 095 
< スク リー ン > 

01 モニ タ の 有効 領域 を 参照 し た い 83811rw さ 56IESISSioigSIisugia3RSRYSe 


02 モニ タ の 表示 サイ ズ を 参照 し た い 
03 モニ タ の 表示 色 の 設定 を 参照 し た い 
SAMPLE 1 ウィ ンド ウ を 画面 中 央 に 表示 する ……… ド ーー 102 





IV | CONTENTS 


く フ ォ ー ム > 

01 フォ ー ム を 参照 し た い … ド oo to 
02 ヲ オー ム の 送信 先 や 送信 方 法 を 設定 し た い EET た KTLTPP い CI XY つの 
03 フォ ー ム の 部 品 を 参照 し た い …ーーーooioorrerrrrrrrrre 
04 フォ ー ム の 内 容 を リセ ッ ト / 送 信 し た いい に 

05 選択 され て いる か を 調べ た い ーー ド ioorrrrre 
06 どの 項目 が 選択 され て いる か を 調べ た い …… ド ーー 
07 選択 の 初期 状態 を 調べ たい ーー ド immnmnrmi 
08 フォ ー ム の 部 品 に 表示 され る テキ スト を 設定 し た い ……………………ーー 
09 自動 的 に フォ ー カ ス を 移動 させ た い OH 

10 数 値 衝 フ ィ ー ル ド と スラ イダ ー を 操作 し た い 


2 人 限 守 UGC R22EOz2EEHRsoaesees 
SAMPLE 1 フォ ー ム の 送信 先 や 送信 方 法 を 設定 する ………… ーー 
SAMPLE 2 フォ ー ム の 部 品 を 参照 する … 

SAMPLE3 選択 され て いる 項目 を 調べ る oo 
SAMPLE 4 フォ ー ム の 内 容 を 送信 する MBCOBISSREMig lg dWgoe 


< イベ ント > 
01 読み 込み 時 や 移動 時 に 処理 を 行い た い DC 
02 画像 が 読 み 込 め な いと き に 処理 を 行い た い BERDRPPPHPPPRPPHTPPTTPPPTPYYPTSM に 10 


03 サイ ズ 変 更 時 に 処理 を 行い た い ………… ド ーーrrrrr131 


04 フォ ー カ ス の 移動 時 に 処理 を 行い た い …… ドド im 132 
05 マウ ス オ ー バ ー 時 に 処理 を 行い た い … oiioiinernrrererrrrrrrr133 
06 マウス クリック 時 に 処理 を 行い た い 34 
07 コン テキ スト メニ ュー を 表示 させ な いよ うに し た い ……………………… 135 
08 フォ ー ム の 送信 / リ セッ ト 時 に 処理 を 行い た い …… ーーー 136 
09 フォ ー ム 操作 時 に 処理 を 行い た いい 一 138 
10 キー 操作 に よっ て 処理 を 行い たい …… ド iiiooorerrrerrre 139 
11 押さ れ た キー の キー コー ド を 取得 し た いい 一 140 
12 イベ ント の 情報 を 取得 し た い … ドド 141 
人 イベ シン ト が 発生 し た 位置 を 調べ た いい OPT 
SAMPLE 1 フォ ー ム 操作 時 に 処理 を 行う て すさ YY ルチア トト 
SAMPLE 2 読み 込み 時 に 処理 を 行う な た ああ 

SAMPLE 3 フォ ー カ ス の 移動 時 に 処理 を 行う 

SAMPLE 4 マウ ス 操 作 時 に 処理 を 行う …ーーーーーーー 





SAMPLE 5 押さ れ た キー の キー コー ド を 取得 する 


SAMPLE 6 イベ ント の 情報 を 取得 する 


SAMPLE 7 イベ ント が 発生 し た 位置 を 調べ る 
SAMPLE 8 マウ ス の 動き に 合わ せ て 画像 を 動か す 


く < タイ マー> 

01 一 定時 間 後に 処理 を 行い た い 
02 一 定時 間 ご と に 処理 を 行い た い 
SAMPLE 1 一 定時 間 ご と に 処理 を 行う 


< 配列 > 

01 配列 を 使い た い BOO 
02 配列 要素 を 追加 / 削 除 し た い … 

04 配列 要素 の 分 割 / 統 合 / 置 換 を し た い 
SAMPLE 1 2 つの 配列 を 操作 する 


< 日 付 > 

01 日 付 や 時 刻 を 扱い た い 

02 日 付 を 設定 し た い 

03 日 付 を 取得 し た い …………… 

04 時 刻 を 設定 し た い -……… 

05 時 刻 を 取得 し た い 

06 指定 し た 時 間 ま で の 経過 秒 数 を 求め た い …- 
07 さま ざま な 形式 で 日 付 を 表示 し た い 
08 協定 世界 時 で 設定 し た い …… ド ーーー 
09 協定 世界 時 で 表示 し た い …… じじ 〇 じ ぐ じ に に 屋 上 眠 


SAMPLE 1 さま ざま な 形式 で 現在 時 刻 を 表示 する ……………… 
SAMPE'2 カレ ンダ ー を 作成 する ………… パ ドー ドー 


SAMPLE 3 来年 まで の 時 間 を カウ ント ダウ ン す る 


く 文字 列 > 
01 文字 列 を 扱い た い ……- 
02 RA に リタ の ンカ ー を 設定 し た い 


04 文字 列 を 分 割 し だ Um 
05 文字 列 を 検索 し た い ーーーーーー 2 
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06 文字 コー ド を 扱い だ や の mm で の ドロ で で で ピピ や の Nauyaereeratacscaveetssoveeos 203 
07 文字 を 抜き 出し た い …… 803 204 
08 文字 列 の 結合 や 抜き 出し を 行い た い …ー ド ーー 205 
SAMPLE1 文字 列 を 検索 する …ーーーーーーーーーーmrmrm207 


く < ブラ ウザ > 

01 ブラ ウザ を 判別 し た い … ド iioeooeereereernerrnoernnoonornmninnm210 
03 」ava が 有効 か どう か を 調べ た い 5NCCR2OC プ 2332 や 3CEt7 ス スキ て 22: て TS 212 
04 プラ グイ ン の 情報 を 調べ た い …… ド ionoeeeeeererreee …213 
05 MIME タ イプ の 情報 を 調べ た い - GSRSSSESEiE mn 214 
SAMPLE 1 ブラ ウザ の 情報 を 調べ る 6 
SAMPLE 2 ブラ ウザ の プラ グイ ン 情 報 を 調べ る …………………………………218 


< 画像 > 

0O1 画像 を 扱い た い …… PF 人 ROSSD3PA028HP3BEERRCSgI 220 
02 画像 の 情報 を 扱い た い ……… 2282EaleSKS42082SdR の CZKSIGSi2G3aG6le の 22 
03 画像 の URI を 参照 設定 し た い RSS の ai 223 
04 画像 の 読み 込み 完了 を 調べ た い - 。 KiviuzeezusdmeeResgeedsze9Geososis の の 
SAMPLE1 画像 の 情報 を 表示 する …………… ド ーーorrrr225 


く リ ンク > 

01 URI を 参照 設定 し た い ……… ド ーー ein26 
03 ペー ジ 中 の リン ク 情 報 を 参照 し た いい ーー 骨 ー228 
04 リン ク の 読み 込み 先 を 設定 し た い 229 
05 ペー ジ 中 の アン カー 情報 を 参照 し た い …… ド ドド iiirorerrr 230 
06 ペー ジ の ロケ ーション 情報 を 参照 し た い …… ド iiiorrereerrre 231 
07 ペー ジ の URI を 変更 し た い …… oe 232 
SAMPLE 1 URI を 参照 / 設 定 する …… ド ーー ドド ioioioororererrrrrrerne 233 
SAMPLE 2 ペー ジ の リ ンク を 書き 出す 2 キー 235 
SAMPLE3 履歴 を 残さ ず ペ ー ジ を 移動 する …… ド oo 237 


く < ヒス トリ ー> 
01 どの ペー ジ か ら 来 た の か 調べ た いい ドド ドド ooo 238 
02 左 歴 の 数 を 調べ た いい ドド ooeenoeeenmnrmm… wcasvcx の 3 


目次 | 





03, | 腸 歴 の 前 後に 移動 じ 大 konnehnsteaeAeierveease eem 240 


SAMPLE 1 どの ペー ジ か ら 来 た の か 調べ る 627EIKcleoai2taE の GSI 人 05 に 0 242 
SAMPLE2 履歴 の 前 後に 移動 する …… つ … ぐ ドド eo 244 
< 変換 > 

04 数 式 を 数 値 に 変換 し た い ……… 了 yi CCCEE 249 
05 文字 列 を エン コー ド / デ コー ド し た い mmnnrnrnnrnrmnrrinm250 
06 数 値 か どう か を 調べ た い CE で EPCP YU 251 
07 真 偽 値 を 作成 し た い …… 5 NDC meine の 252 
SAMPLE1 文字 列 を 数 値 に 変換 する oe 253 
< 数 学 関数 > 

01 乱数 を 発生 させ た い tgrGiL5083wtal 6 Yi ais -256 
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本 書 は 第 1 部 「 基 礎 知識 ]、 第 2 部 「 リ ファ レン ス 」、 第 3 部 「 オ ブ ジ ェクト 一 覧 」 の 3 部 構成 と な 
つて いま す 。 
第 1 部 [javaScript の 基礎 知識 ] で は 、 初 め て javaScript を 使っ て Web サ イト を 作る 人 で も こ 


【 解 説 ペー ジ 】 基本 書式 

タイ トル で 表し て いる 内 容 を 表現 する た め の 
基本 的 な 書式 で す 。 解説 し て いる プロ パテ ィ 
や メソ ッ ド 、 イ ベン ト な ど は 赤色 、 引 数 や 親 
オブ ジェ クト は 青色 で 表記 し て いま す 。 










効果 や 用 途 に よっ て 分 類 し て いま す 。 
























タイ トル b 

「 こ し た い 」 と いう 形式 で 具体 的 に 何 

が で きる の か を 表し て いま す 。 使 用 

目的 か ら 選 ん で くだ さい 。 

値 ち トー 細 隊 ………= 

基本 書式 で 娘 や な どの 記号 で 表し *flename zoomroeee 条 
た 値 の 意味 で す 。 し ovyo4ouexavorー | 
幸生 | 
解説 し て いる 基本 書式 の 形式 (オブ ブラ ウザ に イン スト ー ル され て いる プラ グイ ン に 関す る 情報 を 参 昭 する プロ パテ ィ で す 。 1 
ジェ クト 、 プロパ ティ 、 メソッド 、 昌 
イベ ント ) で す 。 同 
解説 | 
その 項目 の 解説 本 文 で す 。 還 


naMgator: 
Ps は Plugin オ ブ ジェ クト (p 065) の 配列 で あり 、 陳 の 要 和 は プ : 22Y に イン スト ー ル き 
て いる プラ クイ ン に 央 し あす 。 赴く の オブ ジェ クト Gpuiel 上 で しか 
0 の プラ グイ ン の 勿 は 0 で す 。 









解説 し て いる プロ パテ ィ 、 メ ソ ッ ド 、 
イベ ント の 使用 例 で す 。 


コラ ム > ーー 
その 項目 に 関す る 注意 点 や 関連 する 
トピ ッ ク 、 さ ら に 理解 を 深め る た め 
の 内 容 を 紹介 し て いま す 。 
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ブラ ウザ 対応 表 ぁ 
参照 各 ブラ ウザ で の 対応 状況 を OX で 示し て いま す 。 
その 項目 と 関係 の 深い 項目 の 参 昭 先 掲載 し て いる すべ て の 書式 で 対応 が 同じ 場合 は 
で す 。 参照 する こと で 体系 的 に 理解 1 行 で 、 異 な る 場合 の み 書式 ご と に 対応 を 表記 
で きま す 。 し て いま す 。 へ の 場合 は 注記 を 掲載 し て いま す 。 


XI| | INTRODUCTION 


の パー ト を し っ か り 読 め ば javaScript を 理解 で きる よう に 、 基 本 的 な 文法 か ら 説明 し て いま す 。 

第 2 部 [javaScript リ ファ レン ス 」 で は 、 」avaScript の 効果 や 利用 する 場面 に 合わ せ て 26 の カ 
テ ゴ リ に 分 け て 各 プ ロ パ ティ 、 メ ソ ッ ド 、 イ ベン ト な ど を 解説 し て いま す 。 カ テ ゴ リ は に 実際 の 
効果 や 用 途 を 重視 し て 分 類 し て いる た め 必 ず し も オブ ジェ クト ご と の 分 類 に な っ て いま せん 。 
オブ ジェ クト ご と の スク リプ ト を 調べ る に は 第 3 部 「 オ ブ ジ ェクト 一 覧 」 を 参照 し て くだ さい 。 

各 カ テ ゴ リ は 解説 ペー ジ と サン プル ソー スペ ー ジ で 構成 され て いま す 。 解説 ペ ー ジ の タイ ト 
ル は 、 目 的 か ら 」avaScript の 機能 を 引け る 形式 に な っ て いま す 。 内 容 は 基本 書式 、 解 説 、 文 例 、 
コラ ム な ど で 構 成 さ れ て いま す 。 

サン プル ソー スペ ー ジ で は 、 解 説 ペ ー ジ で 紹介 し て いる プロ パテ ィ や メソ ッ ド 、 イ ベン ト を 
使用 し た サン プル プロ グラ ム の ソー ス 、 解 説 、 ブ ラウ ザ 表 示 画 面 を 掲載 し て いま す 。 


【 サ ンプ ルソー スペ ー ジ )】 


タイ トル 解説 と 参照 

その サン プル で | サン ブル ソー | その サン ブル ソー ス で 使用 し て いる プロ パテ ィ 、 
で きる こと を 表 | ス の 解説 で す 。 | メソ ッ ド 、 イ ベン ト の 解説 ベー ジ の 参照 先 で す 。 
し て いま す 。 














サン プル ソー ス b 
各種 プロ パテ ィ 、 メ ソ ッ ド 、 イ ベン ト な ど を 
使用 し た 具体 的 な サン プル ソー ス で す 。 原則 
的 に javaScript ソ ー ス と HTML ソ ー ス の 2 つか 


サン プル 表示 画面 > 
ソー ス を 掲載 し た サン ブル プロ グラ ム を 





ら な っ て いま す 。 ソー スコ ー ド の 色分け は 解 
説 ペ ー ジ の 基本 書式 に 準じ し 、 コ メン ト は 緑色 
で 表記 し て いま す 。 また 、HTML ソ ー ス の 中 
で javaScript の 呼び 出し に 使わ れ て いる 部 分 
は 赤字 で す 。 ユー ザー が 任意 で 名 前 を 付け ら 
れる 関数 名 や 変数 名 は 斜体 で 表記 し て いま す 。 


実際 に ブラ ウザ で 表示 し た と き の 画 面 で 
す 。 基本 的 に は Internet Explorer 10 で の 
表示 画面 を 掲載 し 、 一 部 の 項目 で Firefox な 
ど ほ か の ブラ ウザ の 画面 を 掲載 し て いま す 。 
iPhone や Android ス マー ト フ ォ ン の ブラ ウ 
ザ 画 面 を 掲載 し て いる 場合 も あり ます 。 


本 書 の 読み 方 | Xl 


| 
| 


| 
| 
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本 書 の 動作 環境 | 
人 


一 OS と ブラ ウザ の 環境 

本 書 は 、 以 下 の 環 境 に お ける ブラ ウザ 表示 に も と づい て 記述 し て お り 、 リ ファ レン ス 内 の 対 
応 表 も 以下 の 環境 で の 結果 と な り ま す 。 

OS 日 本 語 版 Microsoft Windows 8/7/Vista/XP 

ブラ ウザ Internet Explorer10/9/8、Firefox 21.0、Google Chrome 26、Opera12.15 

OS 日 本 語 版 Mac OS X 10.8.2 

ブラ ウザ Firefox 21.0、Google Chrome 26、Opera12.15、Safari 6.0.2 

OS iOS 6.1.3 

ブラ ウザ iPhone Safari 

OS Android 4.1 

ブラ ウザ Android 標 準 ブ ラウ ザ 

















※Windows 版 afari は 2012 年 7 月 に 提供 が 終了 し た た め 、Safari は Mac で の 検証 結果 と な り ま す 


画 検 証 用 端末 
本 書 の 検証 に 使用 し た モバ イル 端末 は 以下 の 通り で す 。 
・Apple iPhone 5/4(iOS 6.1.3 搭 載 ) 
・Xperia Z SO-02E(Android 4.1 搭 載 ) 


圏 ディ スプ レイ 表示 

サン プル ソー ス を 表示 し て いる ディ スプ レイ 画面 
は 、 基 本 的 に 各 ブ ラウ ザ の 最新 バー ジョ ン (Internet 
Explorer な ら 10) の 初期 設定 の も の を 掲載 し て いま す 。 Apple iPhone 5 Xperia Z SO-02E 
効果 が 明確 に 現れ る よう に 、 適宜 画面 表示 を 拡大 し 協力 :NTT ド コモ 
て いる 場合 も あり ます 。 

掲載 画面 は あく まで も 一 例 で す の で 、 ブ ラウ ザ の 設定 や お 使い の セキ ュ リ ティ ソフ ト の 設定 
に よっ て は 、 本 書 の 表示 通り に は な ら な い の で 注意 し て くだ さい 。 





一 サン プル デー タ 

本 書 の サン プル デー タ は 以下 の URL より ダウ ン ロ ー ド また は 、 最 後 の ペ ー ジ の QR コー ド よ 
り ア クセ ス し て くだ さい 。 

http://Wwwr.shoeisha.Com/book/pc/dic/ 
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第 1 部 


javaScript の 


JavaScript BASIC 











に た や 】【eR (Jl 


肌 avaScript の 特徴 


JavaScript は Web ブ ラウ ザ 上 な ど で 動 作 す る スク リプ ト 言 語 (簡易 プロ グラ ミン グ 言 語 ) で 
す 。 

JavaScript の 身近 な 利用 例 と し て は 、 ク リッ ク し た と き に アラ ー ト を 表示 する 、 任 意 の 設定 
で 新しい ウィ ンド ウ を 開き 、 新 し い ウ ィ ン ド ウ か ら 元 の ウィ ンド ウ の 内 容 を 操作 する と いっ た 
も の が あり ます 。HTML/XHTML だ け で 作成 され た Web ペ ー ジ は 静 的 な 表現 し か で きま せん 
が 、 javaScript を 利用 する こと で ペー ジ に 動き を 持た せる こと が 可能 に な っ た の で す 。 

開発 当初 は Web ブ ラウ ザ で 利用 する こと を 目的 と し て いま し た が 、 現在 で は Web サ ー バ 上 
で Web ペ ー ジ を 作成 する た め 、 あ る い は 汎用 的 な スク リプ ト 言 語 と し て Web ペ ー ジ 以外 の 分 
野 で も 広く 用 いら れる よう に な っ て いま す 。 

JavaScript は 後述 する よう に 、 主 に HTML/XHTML 文 書 中 の script 要 素 の 内 部 に 記述 する か 、 
スク リプ ト を 記述 し た ファ イル を 別に 保存 し て お き ( 拡 張子 「.js」)、 保 存 し た ファ イル を 読み 
込む こと で 動作 させ る こと が で きま す 。 コ ン パ イル (プロ グラ ミン グ 言 語 で 作成 し た ソー スコ 
ー ド を コン ピュ ー タ が 理解 で きる 機械 語 に 変換 する こと ) 作 業 を 必要 と し な い イ ンタ ー プ リタ 
言語 の た め 、 JavaScript に 対応 し た ブラ ウザ が あれ ば 手軽 に スク リプ ト を 実行 で きる と いう 特 
微 を 持っ て いま す 。 








肌 avascript の 歴史 


]avaScript は Netscape 社 が 開発 し た LiveScript が 原型 に な っ て お り 、 そ の 後 Sun 
Microsystems 社 と の 共同 開発 の 流れ を 受け て javaScript と 名 称 を 変更 し 、 現在 に 至り ます 。 

JavaScript は まず Netscape Navigator 2.0 に 搭載 され 、 そ の 後 、 Microsoft 社 の Internet 
Explorer 3.0 に も 搭載 され まし た (正確 に は Internet Explorer に 搭載 され て いる の は 
JavaScript 互 換 の Script)。 し か し 、 ブ ラウ ザ 間 の 実装 に 若干 の 違い が あり 、 ブ ラウ ザ に よっ 
て 使え な い 機 能 が あっ た り 、 同 じ プ ログ ラム で も 動作 が 異な っ た り 、 と いっ た 問題 な 生じ た た 
め 、 ヨ ー ロ ッ パ の 標準 化 団体 ECMA が 両社 へ 呼び か け 、 avaScript の 中 核 的 な 仕様 が 
ECMAScript と し て 標準 化 さ れ ま し た 。 こ の 標準 化 に よっ て javaScript は 多く の ブラ ウザ で 利 
用 で きる よう に な っ た の で す 。MAicrosoft 社 の jScript の 例 に 見 られ る よう に 人 独自 拡張 な ど を 施 
され る ケー ス も 多く 、 そ の 場合 は 独自 の 名 称 を 付け る こと が 慣習 に な っ つて いる よう で す 。 
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た で 【eW り 4 


JavaScript の 組み 込み 方 





JavaScript を Web ペ ー ジ に 組み 込む に は 次 の 方 法 が あり ます 。 
・HTML/XHTML 文 書 内 に 記述 する 方 法 

・ 外 部 ファ イル に 記述 し て 読み 込む 方 法 

・ そ の 他 の 方 法 (HTML/XHTAML 要 素 内 に 直接 記述 する 方 法 、 ブ ラウ ザ で 直接 実行 する 方 法 ) 


llHTML/XHTML 文 書 内 に 記述 する 方 法 


く script> タ グ で 囲ん だ 中 に スク リプ ト の 内 容 を 記述 し ます 。type 属 性 に は 記述 する 言語 の 
MIME タ イプ を 指定 し ます 。 HTML5 で は type 属 性 は 省略 可能 で 、text/javascript(javaScript 
の MIME タ イブ) が 既定 値 と な り ま し た 。 





<Script type= "text/javascript"> 衣 </script> 
太 …… ス クリ プ ト の 内 容 


※HTML5 で は type 属 性 省略 可能 





Column language 属 性 


従来 は type 属 性 で は な く 、language 属 性 を 利用 し て スク リプ ト 言 語 の 指定 を 行っ て いま し た 
が 、language 属 性 は HTML 4.01/XHTML 1.0 で は 「 非 推奨 ] に 指定 され て いる た め 使 用 し ませ ん 
(Transitional DTD か FramesetDTD で あれ ば 利用 で きま す )。HTML5 で は 仕様 か ら 除 外さ れ 、「 強 
く 非 推奨 ] こ な り ま し た 。 


※ 紙 面 の 都合 上 、 文 書 型 宣 言 な ど は 省略 し て いま す 。 
<!DOCTYPE htm> 
<html> 
<head> 
<title>lavaScript Sample</title> 
<Script> 
<!-- 
ここ に スク リプ ト を 記述 し ます 。 
/ー 
</script> 
</head> 
<bodV> 
<script type="text/javascript"> // avaScript は 複数 記述 で きる 


過 友 き 
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ここ に スク リプ ト を 記述 し ます 。 
特定 の 場所 に 書き 出す に は <body> タ グ の 中 の 
書き 出し た い 場 所 に 記述 する ツ 
7ー 
</script> 
<noscript> 
<P> こ の ペー ジ は javaScript 対 応 ブ ラウ ザ で 見 て くだ さい 。</P> 
</noscript> 
</body> 
</htm> 





國 ス クリ プ ト 内 容 の コメ ント 化 
Script 要素 内 に スク リプ ト を 書く 場合 、 ス クリ プ ト 全 体 を 「<!-」 と 「//->」 で 囲み 、 古 い ブ ラ 
ウザ な ど で ス クリ プ ト の 内 容 が その まま 表示 され る の を 防ぐ の が 一 般 的 で し た 。 


<Script type="text/]avascript"> 
<!-- 

ここ に スク リプ ト を 記述 し ます 。 
//--> 


</script> 


XHTML 1.0 の 仕様 で は この よう に 記述 する と コメ ント と し て 解釈 され 、 無 視 さ れる こと に 
な っ て いる た め 、 代 わり に 「//<![CDATA[ 」 と 「//]]>」 で 囲っ て 記述 し ます 。HTML5 で は 、 
XHTML 書 式 の 場合 は これ と 同様 に 記述 し ます が 、HTML 書 式 の 場合 は 従来 の コメ ント 化 で も 
構い ませ ん 。 


<Stvle type= "text/javascript"> 
//<![CDATA[ 

ここ に スク リプ ト を 記述 し ます 。 
7/]1> 

</style> 


し か し 、 最 新 で な い バ パー ジョ ン の ブラ ウザ で は この 方 法 が サポ ー ト され て いな いこ と が あり 
ます 。 こ うし た 問題 に 対処 する た め に は 次 の よう な 方 法 が あり ます 。 


@ 外 部 ファ イル に する (p.005) 

スク リプ ト だ け を 記述 し た ファ イル を 別に 用 意 し 、HTML/XHTML 文 書か ら 読み 込む 方 法 で 
す 。 外部 ファ イル で は スク リプ ト を コメ ント 化す る 必要 は あり ませ ん 。 XHTML で は 、 こ の 方 
法 が 奨励 され て いま す 。 
スク リプ ト 内 容 を コメ ント 化し な い 

script 要 素 内 に 直接 スク リプ ト を 記述 し ます 。script 要 素 に 未 対応 の 古い ブラ ウザ な ど で は 、 
スタ イル の 記述 箇所 が その まま 表示 され て し まう 可能 性 も あり ます が 、 現 在 一 般 的 な ブラ ウザ 
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は どれ も script 要 素 に 対応 し て いる の で 大 き な 問 題 は は な いで し ょ う 。 


また 、 現 在 一 般 的 な ブラ ウザ で は 、XHTML 文書 で HTML 文書 と 同様 に 「<!-」 と 「->」 で 囲っ 
て コメ ント 化し て も 問題 な く 実 行 さ れる よう で す が 、 こ れ は XHTML 的 に は 文法 的 に 正しい 書 
き 方 と は 言え ませ ん 。 な る べく 仕様 の 奨励 に 従っ て 、 コ メン ト 化 の 不要 な 外部 ファ イル を 利用 
する の が よい で し よう 。 


外部 ファ イル に 記述 し て 読み 込む 方 法 


スク リプ ト だ け を 記述 し た ファ イル を 別に 用 意 し (拡張 子 は 「js」)、script 要 素 の src 属 性 で 
ファ イル 名 (URI) を 指定 し て 読み 込む 方 法 で す 。script 要 素 の 内 容 に は 何 も 書か ず に 、 終 了 タ 
グ </script> を 付け ます 。XHTML で は この 方 法 が 奨励 され て いま す 。 





<Script type="text/javascript" src=" 文 "></script> 
廊 …… ス クリ プ ト フ ァイル 名 (URI) 





外部 ファ イル を 使え ば 、1 つ の javaScript フ ァイル を 複数 の HTML 文書 で 使用 で きま す 





Source_ 
document.write("Hello"): 








<html> 
<head> 


<title>lavaScript Sample</title> 
1 type="text/javascript" src="hello.js"></script> 
<body> 
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』 その 他 の 方 法 


一 HTML/XHTML の 要素 内 に 直接 記述 する 
HTML/XHTML の 要素 の 属性 (イベ ント 属性 ) に 設定 する 方 法 で す 。 





圏 ブラ ウザ で 直接 実行 する 

HTML/XHTML の a 要 素 の href 属 性 、 ま た は Web ブ ラウ ザ の アド レス バー に javascript:~ と 
いう 形 で スク リプ ト を 記述 し 、 実行 する 方 法 で す 。 

た と えば 、 次 の 一 文 を アド レス バー に 入力 し て 実行 し た 場合 、「 ア ドレ スバ ー か ら 実 行 し て い 
ます 」 と いう ダイ アロ グ が 表示 され ます 。 


例 :javascript:alert( "アド レス バー か ら 実 行 し て いま す "): 


また 、 次 の 例 で は クリ ッ ク し て も 何 も 動作 し な いよ うに な り ま す 。 void は 何 も 値 を 返さ な 
い 命令 で す (p.246) 。 


例 : <a href="javascript:void(0) "> クリ ッ ク し て も 何 も 起こ り ま せん 。</a> 


上 と の 方 法 で 記述 する か 


現在 の Web で は HTML/XHTML 本 来 の 「 文 書 構造 を 示す 」 機 能 と 、 そ れ 以 外 の プレ ゼン テー 
ショ ン に 関わ る 機能 を 分 離さ する よう に な っ て き て いま す 。 外部 スク リプ ト を 読み 込む 方 法 で 
あれ ば HTML/XHTML 文 書か ら ス クリ プ ト 部 分 が 切り 離さ れる た め 、 こ うし た 方 針 に 従う こと 
が で きま す 。 ま た 、 前 述 の か よう な スク リプ ト の コメ ント 化 に 関す る 問題 に も 対処 で きる と いう 
メリ ッ ト も あり ます 。 そ の た め 、 な る べく 外部 スク リプ ト を 使用 し て 記述 する の が 望ま し いで 
し ょ う 。 本 書 で も 基本 的 に 外部 スク リプ ト を 使用 し て いま す 。 





上 記述 する 位置 


HTML/XHTML 文 書 内 に 記述 する 方 法 、 外 部 ファ イル に 記述 し て 読み 込む 方 法 の どちら の 場 
合 も 、script 要 素 は HTML/XHTML 文 書 の head 要 素 内 や body 要 素 内 に も 記述 で きま す 。 ど こ 
に 記述 する か は 自由 で す が 、 」avaScript の 性 質 上 読み 込ま れ た 順番 に 実行 され る の で 、 特 定 の 
場所 で 実行 させ た い 場 合 に は その 位置 に 記述 し て くだ さい 。 ス クリ プ ト は HTML/XHTL 文 書 
の 中 に 複数 記述 する こと も で きま す 。 





006 | BASIC02 


デフ ォ ル ト の スク リプ ト 言 語 の 指定 


HTML/XHTML は さま ざま な スク リプ ト 言 語 を 利用 で きる た め 、 デ フォ ルト の スク リプ ト 言 
語 を 明示 し な けれ ば な り ま せん 。 次 の 一 文 を head 要 素 に 記述 し て くだ さい 。 た だ し 、HTML5 
で は 「text/javascript」 が 既定 の た め 指 定 不要 で す 。 


※HTML5 で は 省略 可 

content 属 性 の 値 に は スク リプ ト 言 語 を 示す MIME タ イプ を 指定 し ます 。 javaScript 言 語 を 
デフ ォ ル ト の スク リプ ト 言 語 と する 場合 は 「content="text/javascript'] と し て くだ さい 。 

イベ ント 属性 で 要素 に 直接 スク リプ ト を 記述 する 場合 に は ここ で 指定 し た 言語 と し て 解釈 さ 
れる こと に な っ て いま す 。 





例 : <head> 
<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title= デ フォ ルト の スク リプ ト 言 語 の 設定 </title> 


</head> 


コメ ント の 書き 方 


javaScript で は 、 そ の 行 の 「//」 よ り 後ろ に 記述 され た 部 分 は コメ ント と な り ま す 。 ま た 、 
「/*」 と 「*/」 で 囲ま れ た 部 分 も コメ ント で す 。 「/*」ー「 */」 を 使用 する 場合 は コメ ント を 複数 行 に 
わた っ て 記述 で きま す 。 

コメ ント の 部 分 は 実行 時 に 無視 され 、 ス クリ プ ト の 動作 に 影響 を 与え ませ ん 。 スク リプ ト に 
関す る 説明 を 記述 し た り 、 エ ラー の 原因 と 思わ れる 部 分 を コメ ント アウ ト し て 動作 を 確認 し た 
りす る な どの 用 途 で 利用 され ます 。 

本 書 で は コメ ント を 緑色 の 文字 で 掲載 し て いま す 。 








| 非 対 応 ブ ラウ ザ へ の 配慮 


noscript 要 素 を 使う こと で 、 avaScript に 対応 し て いな い 環境 で ペー ジ を 開い た 人 に だ け 表 
示さ せる HTML/XHTML 文 書 を 記述 する こと も で きま す 。 HTML5 で は head 要 素 内 で も 使用 で 
きる よう に な り ま し た 。 
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]avaScript の 大 本 書式 や 記述 する と き の 注 意 点 を まとめ て お きま し ょ う 。 


半角 文字 で 記述 


JavaScript で は 基本 的 に 半角 の 英 数 字 と 「1]( 中 カッ コ ) 、 「0」( 小 カッ コ )、 「"」( ダ ブル ク ォ ー 
テー ショ ン ) な どの 記号 が 使用 で きま す 。 た だ し 、「"」 や 「"」( シ ング ルク ォ ー テ ーション ) で く 
くら れ た 文字 は String オ ブ ジ ェクト と し て 扱わ れる た め 、「"」 や 「"」 で くく れ ば 全角 文字 も 使用 
で きま す 。 

JavaScript で は 大 文字 小文字 が 区 別 さ れ ま す 。 た と えば 次 の 例 1 の 処理 を 例 2 の よう に 記述 
する と 、 エ ラー に な っ て スク リプ ト は 動作 し ませ ん 。 





例 1 : document.write(" こ ん に ち は "): 
例 2 :document.Write ("こんにちは 『"): 


また 、 変数 名 や 関数 名 な ど に つい て も 同様 で 、 た と えば 変数 myDay と 変数 myday は 別 の も 
の と し て 解釈 され ます 。 ス ペル ミス に 十分 注意 し て くだ さい 。 

変数 名 や 関数 名 な どの ユー ザー が 任意 の 名 前 を 指定 で きる も の に つい て は 次 の よう な 命名 規 
則 が あり 、 こ れ に 従え ば 自由 に 名 前 を 付け る こと が で きま す 。 


@ 半 朋 の アル ファ ベッ ト (aーz、AーZ) 、 数 字 (0-9)、「_」( ア ンダ ー バ ー)、「$」( ド ル 記 号 ) を 
使用 する 

人 @1 文 字 目 に は 数 字 は 使用 で き な い 

介 予 約 語 で な い (右記 参照 ) 


予約 語 と は 言語 の 仕様 で 既存 の キー ワー ド と し て 予約 され て いる も の 、 あ る い は 将来 の キー 
ワー ド と し て 予約 され て いる も の な ど で 、 変数 名 と し て 使用 で きま せん 。 
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:abstract  :boolean 





: break 


・ volatile 


』 スク リプ ト 内 の 改行 と セミ コロ ン 


JavaScript は 1 つま た は いく つか の 命令 文 で 処理 が 構成 され 、 処 理 の 区 切り を 「:」( セ ミコ ロ 
ン ) で 表し ます 。 

1 行 に 1 つの 命令 を 書く の で あれ ば 、 セ ミコ ロン は な く て も 動作 し ます が 、 区 切り を 明確 に 
する 意味 で も 付け て お いた 方 が よい で し ょ う 。 セミ コロ ン が 入っ て いれ ば 、 複 数 の 処理 を ま と 
め て 1 行 に 記述 する こと が で きま す 。 以下 は 、2 つ の 命令 を 1 行 に まとめ た 例 で す 。 





例 :ogagy = new /a7fe: t = today.getDate(): 


逆 に 1 行 の 記述 が 長く な る 場合 は 、 途 中 で 改行 を 入れ て も 動作 に 影響 あり ませ ん 。 た だ し 、 
プロ グラ ム を 構成 する 単語 や 文字 列 の 途中 で 改行 を 入れ る こと は で きま せん 。 以下 は 1 つの 命 
令 を 2 行 に し た 例 で す 。 


例 : document.write( "訪問 済み リン ク の 色 は " 
+ document.viinkColor + "で す 。 『): 


JavaScript で 扱え る 数 値 は 整数 (1、-2 な ど ) と 浮動 小数 点数 (2.145 な ど ) で す 。 整 数 で は 、 
10 進 数 の ほか に 16 進 数 、8 進 数 も 扱え ます 。16 進 数 は 先頭 に Ox も し く は 0X を 付け 、8 進 数 は 
先頭 に 0 を 付け た 表記 方 法 で 表し ます 。 た と えば 16 進 数 の ff を javaScript で 扱う に は Oxff と 表 
記し ます 。 





文字 列 


javaScript で 文字 列 を 扱う 場合 は 、「"」( ダ ブル クォーテーション ) ま た は 「'」( シ ング ルク ォ ー 
テー ショ ン ) で 囲み ます 。 「"」 や 「'」 で 囲ま れ た 場合 は 数 字 で あっ て も 数 値 で は な く 文 字 列 と し て 
扱わ れ ます 。 

また 、 ス クリ プ ト 内 に タグ を 埋め 込む 場合 、 タ グ も 文字 列 の 一 部 と し て 「"」 や 「'」 で 囲む 必要 
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が あり ます 。 複数 の 文字 列 を つなげ る に は 、 文 字 列 連結 演算 子 「+」( プ ラス ) を 使用 し ます 。 


例 :7ogy = new Date(): 
# = today.getDate(): 
goc/77e7 た write(" こ ん に ち は 。 い い お 天 気 で すね 。<br />"): 
99c/7767 た write(' 今 日 は <b>!+ エ ォ "</b> 日 で す 。 9 

















な お 、write、writetn メ ソ ッ ド で 「.」( カ ンマ ) で 区 切っ て 文字 列 を 書く と 、 つ な が っ て 出力 
され ます 。 


上 座 理 値 ( ブ ー ル 値 ) 


論理 値 は 、true( 真 ) ま た は false ( 偽 ) の いずれ か の 値 を 取り 、 条 件 分 岐 (D.024) な ど で 利用 
され ます 。 





1 その 他 の 値 


値 が 何 も な い 状 態 を 示す null、 値 が 見 つか ら な い 場 合 や 定義 され て いな いこ と を 示す 
undefined な ど が あり ます 。 
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javaScript で 色 を 指定 する に は 、HTML/XHTAML 同 様 、RGB 値 を 用 いる 方 法 と 、 色 名 を 用 い 
る 方 法 と が あり 、 そ れ ぞ れ 次 の よう に 指定 し ます 。 


男 #rrggbb(16 進 数 で 指定 ) 
# に 続け て 赤 (r)、 緑 (g)、 青 (b) の 値 を 00-f の 16 進 数 計 6 桁 で 表現 し ます 。 た と えば 、 黒 
を 指定 する 場合 に は #000000 と な り ます 。 基本 的 な 16 色 に つい て は 下 表 を 参照 し て くだ さい 。 


田 色 名 ( 色 の 名 前 で 指定 ) 
色 名 で 直接 指定 し ます 。 大 文字 と 小文字 は 区 別 さ れ ま せん 。HTML 4.01 で は 基本 的 な 16 色 
が 定義 され て いま す 。 基本 的 な 16 色 に つい て は 下 表 を 参照 し て くだ さい 。 


PUU:UUE 還 り Eu 福 議 : り りり りり り 


purple #800080 


maroon #800000 !teal 


CSS で の 色 指 定 
javaScript で は CSS の スタ イル も 操作 する こと が 可能 で す 。 そ の 場合 は CSS の 色 の 指定 方 法 を 利 
用 で きま す 。 
以下 は すべ て midashi と いう オブ ジェ クト の 文字 色 を 赤 に 設定 し て いま す 。 


midashi.style.color = "0000": 
midashi.style.color = " 盾 00": 
midashi.style.color = "rgb(100%,096,096) 
midashi.style.color = "rgb(255,0,0): 
midashi.style.color = "red": 


な お 、CSS3 で は 、HTML 4.01 で 定義 され た 基本 的 な 16 色 に 加え て 、SVG 仕 様 に 準じ る 多数 の 
キー ワー ド が 追加 され て いま す 。 
※CSS の 詳し い 解 説 は 本 書 姉妹 書 「HTML5&CSS3 辞 典 第 2 版 ] を 参照 くだ さい 。 
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]avaScript は オブ ジェ クト ベー ス の スク リプ ト 言 語 で す 。 こ こ で は javaScript を 理解 する の 
に 不可 欠 な 、 オ ブ ジ ェクト 、 プ ロ パ ティ 、 メ ソ ッ ド と いっ た 言葉 と その 概要 を 説明 し ます 。 


オブジェ クト 


JavaScript で は 、 ウ ィ ン ド ウ 、 ド キュ メン ト 、 フ ォ ー ム 、 文 字 列 、 日 付 な ど 、 ペ ー ジ の 表示 
に 関わ る さま ざま な も の を 制御 し ます 。 操作 の 対象 と な る これ ら の も の は すべ て オブ ジェ クト 
と 呼ば れ ま す 。 

オブ ジェ クト に は 大 きく 分 け て 、 ビ ルト イン オブ ジェ クト と ナビ ゲー ター オブ ジェ クト の 2 
種類 が あり ます 。 





還 ビ ルト イン オブ ジェ クト 

ビル トイ ン オ ブ ジ ェクト は javaScript に あら か じ め 組 み 込ま れ た 機能 を オブ ジェ クト 化し た 
も の で 、ECMAScript で 標準 化 され た 仕様 に 基づい て いま す 。 配列 、 文 字 列 、 正 規 表現 な ど を 
扱う こと が で きま す 。 


圏 ナビ ゲー ター オブ ジェ クト 

ナビ ゲー ター オブ ジェ クト は Web ブ ラウ ザ 自 体 の 情報 や 、 ペ ー ジ の 表示 に 関わ る 機能 部 
品 を オブ ジェ クト 化し た も の で 、 ウ ィ ン ド ウ 、 フ ォ ー ム 、 画像 な ど を 扱う こと が で きま す 。 
ECMAScript で 標準 化 さ れ て いな いた め 、 ブ ラウ サザ 独自 の オブ ジェ クト や メソ ッ ド 、 プ ロ パ テ 
イ が 実装 され て いる こと が あり ます 。 

ナビ ゲー ター オブ ジェ クト を 構成 する オブ ジェ クト は 、 右 図 の よう に 基本 的 に は Window 
オブ ジェ クト を 最上 位 と する ツリ ー 構 造 を と っ て いま す 。 下 位 の オブ ジェ クト は 上 位 の オブ ジ 
ェクト の プロ パテ ィ で 参照 で き 、 下 位 の オブ ジェ クト を 操作 し た い 場 合 に は 上 位 の オブ ジェ ク 
ト か ら 順 に 「.」( ピ リオ ド ) で つなげ て 記述 し ます 。 た だ し 、Window オ ブ ジ ェクト は 最上 位 の 
オブ ジェ クト の た め 、 省 略 で きま す 。 
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カビ ゲー ター オジ エク に 





ビル トイ ン オ ブ ジ ェクト 





javaScript の オブ ジェ クト 階層 





それ ぞ れ の オブ ジェ クト に は 、 そ の オブ ジェ クト の 状態 を 参照 変更 する た め の プ ロ パ ティ 
や オブ ジェ クト に 対し て 命令 を 実行 する た め の メ ソ ッ ド が 多数 用 意 さ れ て いま す 。 

本 書 で 紹介 する javaScript の オブ ジェ クト と それ に 付随 する プロ パテ ィ 、 メ ソ ッ ド に つい て 
は p.417 以 降 の 「 オ ブ ジ ェクト 一 覧 」 を 参照 し て くだ さい 。 


BASIC05 | 013 








| プロパティ 


プロ パテ ィ と は 、 オ ブ ジ ェクト の 状態 や 属性 の こと で す 。 プ ロ パ ティ は 参照 や 設定 が 可能 で 
す が 、 プ ロ パ ティ に よっ て は 参照 の み で 設定 の で き な い も の も あり ます 。 

プロ パテ ィ を 参照 する に は 次 の よう に オブ ジェ クト 名 と プロ パテ ィ 名 を 「.」( ピ リオ ド ) で つ 
な げ て 記述 し ます 。 


逆 に 設定 する 場合 に は 次 の よう に し ます 。 


た と えば 、Document( ド キュ メン ト ) オ ブ ジ ェクト に は ドキ ュ メ ント の 背景 色 や 文字 色 、 
ドキ ュ メ ント の URI、 タ イト ル 、 ド メイ ン な どの 状態 や 属性 を 表す プロ パテ ィ が あり ます 。 こ 
れ ら を 参照 また は 設定 する こと に よっ て 、 ペ ー ジ の 背景 色 を 変え た り 別 の ペー ジ に 移動 させ た 
りす る な どの 動作 を 実現 で きま す 。 次 の 例 で は 、Document オ ブ ジ ェクト の bgColor ブ ロバ パ 
ティ で ペー ジ の 痛 景色 を 赤 に し て いま す 。 





例 document.bgColor = "red": 


メソ ッ ド 


メソ ッ ド と は オブ ジェ クト に 対す る 処理 を まとめ た も の で す 。 メ ソ ッ ド を 呼び 出す と 、 そ の 
オブ ジェ クト に 対し て 何ら か の 処理 を させ る こと が で きま す 。 

メソ ッ ド を 記述 する に は 次 の よう に オブ ジェ クト 名 と メソ ッ ド 名 を 「.」( ピ ビリ オド) で つなげ 
て 記述 し 、 必 要 に 応じ て (0) 内 に 引数 を 指定 し ます 。 


た と えば 、String オ ブ ジ ェクト に は 文字 列 の 色 や サイ ズ を 変更 し た り 、 文 字 列 の 検索 や 分 割 
を 行っ た りす る メソ ッ ド が あり ます 。 次 の 例 で は 、String オ ブ ジ ェクト の indexOf メ ソ ッ ド で 
文字 列 str か ら "Internet' を 検索 し 、 結 果 を 変数 に 代入 し て いま す 。 





例 :s な = "Microsoft Internet Explorer": 
7 = s が .indexOf("Internet", 0): 
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イベ ント は マウ ス の ボタ ン が クリ ッ ク さ れ た 、 ペ ー ジ の 読み 込み が 完了 し た 、 フ ォ ー ム の 選 
択 メ ニュ ー が 変更 され た 、 な ど 何 か し ら の 動作 が 起こ っ た と き に 発生 し ます 。 こ の イベ ント を 
取得 する の が イベ ント ハン ドラ で す 。 た と えば 、 フ ォ ー ム の ボタ ン な ど が クリ ッ ク さ れ た と き 
の イベ ント ハン ドラ は onclick に な り ま す 。 


| イベ ント で スク リプ ト を 実行 する 


イベ ント ハン ドラ を HTML/XHTML の 要素 の 属性 (イベ ント 属性 ) や オブ ジェ クト に 設定 し 、 
javaScript の 処理 を 呼び 出す よう に すれ ば 、 指定 の 動作 が 起こ っ た と き に 設定 し た 処理 を 実行 
させ る こと が で きま す 。 その 際 、「:」( セ ミコ ロン ) で 区 切れ ば 複数 の 処理 を 指定 で きま す 。 





圏 イベ ント 属性 を 利用 する 
HTML/XHTML 要 素 の 属性 を 利用 し 、 実行 する javaScript の 処理 を 「" 」( ダブ ルク ォ ー テ ー 
ショ ン ) で 囲っ て 指定 する 方 法 で す 。 


例 : <1nput type="button" value="Cick!" 
onclick="alert( よう こそ /> 


- 本 浅 
@⑨? 値 http://wwwshoeisha.com/book/ で | esdfc> ト x 間 











クリ ッ ク イ ベン ト (onclick)。 ボタ ン を クリ ッ ク す る と alert( よ うこ そ ) が 実行 され ます 
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還 ス クリ プ ト 中 に 設定 する 

HTML/XHTML の イベ ント 属性 を 利用 せ ず 、 javaScript で イベ ント ハン ドラ の 内 容 を 直接 指 
定 する 方 法 で す 。 通 常 、 関 数 の 呼び 出し に は 関数 名 の 後ろ に () が 必要 で す が (p.039)、 こ の 場 
合 () は 不要 で す 。 


例 :function 77y7g7c(){ 
alert(" シ ェ イ クス ピア 「 ハ ムレ ッ ト 」 か ら "): 
return false: 


} 


document.getElementById("7es7").onmouseover = の 7c : 


- ロ 謀 紀 
ィ ベ > ト x 較 








@ 介 htp://wwshoetsha.com/book/ で | 天 


Y 








作 シェ イク スピ ア 「 ル ムレ ッ ト 」 か ら 


|K- 理 較 
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変数 と は 値 や 式 を 格納 する 箱 の よう な も の で す 。 変数 を 用 いる こと に よっ て スク リプ ト が 簡 
潔 に な り 、 メ ン テ ナ ンス が 容易 に な り ま す 。 


」avaScript で は 変数 に 数 値 、 文 字 列 、 真 偽 値 (true ま た は false)、 オ ブ ジ ェクト (日 付 、 配列 、 
ウィ ンド ウ な ど ) を 格納 で きま す 。 


下記 の 例 で は ユー ザー が 入力 し た 名 前 を res と いう 変数 に 格納 し 、document.write で 書き 
出し て いま す 。 


例 :Var 7es = prompt(" 名 前 を 入力 し て くだ さい 。『): 
document.write ("こんにちは 、"+ 7es + "さん 。『): 


- 要 
JCS 





@ ぐ @@⑨g hpx//ww ahoeisha comcocKkau/JS メ |O javasonpt sample 門 遇 





2 の トカ ンプ ト : 


< PS 
こん に ち は 、 翔 泳 太郎 さん 。 





実行 結果 。 ユー ザー が 入力 し た 名 前 を 変数 に 格納 し 、 書き 出し ます 
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| 変数 の 記述 方 法 


変数 の 記述 方 法 に は いく つか の パタ ー ン が あり ます 。 変数 は 宣言 し て か ら 利用 する の が 一 般 
的 で す 。 変数 の 宣言 は 変数 名 の 前 に 変数 を 宣言 する 命令 文 var を 付け て 行い ます が 、 
JavaScript で は 初め て 登場 する 単語 を 変数 と し て 認識 する た め 、 こ の var は 省略 可能 で す 。 た 
だ し 、var の 有無 に よっ て 変数 の 有効 範囲 が 変わ る こと が る の で 注意 が 必要 で す (p.019 を 参 
照 )。 





較 変 数 を 宣言 する 
変数 の 宣言 の み を 行い ます 。 複数 の と き は 例 2 の よう に 1 行 に まとめ る こと も で きま す 。 


例 1 :Var s か : 
Var 77 ル 77: 


例 2:Var s か : 77 ル 77z 


還 変 数 を 宣言 し 、 初 期 値 を 代入 する 
変数 を 宣言 する と 同時 に 、 初 期 値 を 代入 し ます 。 複数 の と き は 例 2 の よう に 1 行 に まとめ る 
こと も で きま す 。 


例 1 :Var s7 = "よう こそ ": 
Var 77 ル 7 = 10: 


例 2 :Var s な = "よう こそ り ": yg77 = 10: 


| 変数 名 


変数 は 、p.008 の よう な 命名 規則 に 治っ て いれ ば 任意 の 名 前 を 指定 で きま す 。p.017 の 例 で 
は /es で は な く /e/// と し て も 問題 あり ませ ん 。 

変数 名 に は 、 そ の 変数 に どん な 種類 の 値 が 代入 され て いる の か が わか りや すい 名 前 を 付け て 
お く と よい で し ょ う 。 

な お 、 本 書 で は 変数 名 は /es の よう に 斜 体 c 示 し て あり ます 。 





| 数 の 有効 範囲 


変数 に は 何 処 で も 有効 な グロ ー バ ル 変 数 と 、 特 定 の 関数 (pb.039) の 内 部 で の み 有 効 な ロー カ 
ル 変 数 が あり 、 そ れ ぞ れ の 変数 が 有効 な 範囲 を スコ ー プ と 言い ます 。 一 般 的 な プロ グラ ム 言 語 
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と は 違い 、 ブ ロッ ク (p.025) は スコ ー プ に は な り ま せん 。 
変数 を 宣言 する と き 、 関 数 の 内 部 で var を 付け て 宣言 し た 場合 に は ロー カル 変数 と な り 、 関 
数 の 外部 で 宣言 し た 場合 や 関数 の 内 部 で あっ て も var を 使わ ず に 宣言 し た 場合 に は グロ ー バ ル 
変数 と な り ま す 。 混乱 を 避け る た め に も な る べく var を 使っ て 宣言 を し た 方 が よい で し ょ う 。 
関数 の 途中 で var を 使っ て 宣言 し て も 、 関 数 の 冒頭 で 宣言 し た の と 同じ 扱い に な る こと に は 
注意 が 必要 で す ( 宣 言 と 同時 に 代入 し た 場合 、 代 入 は 実際 に 記述 され た 位置 で 行わ れ ま す ) 。 







②④ ⑨ で は 「1」 が 書き 出さ れる 


ーー た IM 守 寺 に 還 の 表 を し た 場合 は 、 
ロー カル 変数 の ほう が 有効 に な り ま 
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JavaScript に は 計算 や 比較 に 利用 する さま ざま な 演算 子 が あり ます 。 大 きく 分 け て 、 四 則 演 
算 を 行う 算術 演算 子 、 数 値 を ビッ ト と し て 扱う ビッ ト 演 算 子 、if 構 文 な ど で 複 数 の 条件 を 扱う 
際 に 使用 する 論理 演算 子 、 数 値 の 大 小 を 比較 する 比較 演算 子 、 演 算 の 結果 を 変数 に 代入 する 代 
入 演 算 子 で す 。 そ れ ぞ れ に つい て 、 例 を 挙げ な が ら 簡単 に 説明 し ます 。 各 演 算 子 の 詳細 に つい 
て は 、p.022 の 一 覧 表 を 参照 し て くだ さい 。 


算術 演算 子 


加算 、 減 算 、 乗 算 、 除 算 、 お よび 除算 の 余り を 求め る 演算 子 で す 。 数 値 の 計算 に 使用 し ます 。 
な お 、 日 常 的 な 計算 に お いて は 、12+5=17 の よう に 使用 し ます が 、 」avaScript で は 多く の 場 
合 、 代 入 演算 子 を 使用 し て 、 次 の よう に 変数 に 計算 の 結果 を 代入 し ます 。 





例 :』 = 12 + 5: //12+5 の 結果 を 変数 a に 代入 する (は 代入 演算 子 ) 


ビッ ト 演 算 子 


ピッ ト 演 算 子 で は 式 の 数 値 を 32 ビ ピッ ト の 整数 と 見 な し て 演算 を 行い ます 。 た と えば 、 次 の 
よう に な り ま す 。 





例 1:12 &5 は 4(1100 & 0101 = 0100) 
例 2:12 | 5 は 13(1100 | 0101 = 1101) 


HTML/XHTML と 組み 合わ せ て 利用 する 限り 、 ピ ビッ ト 演 算 子 が 登場 する ケー ス は あま りあ り 
ませ ん 。 
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| 上座 理 演算 子 





「 両 方 が 正しい 」、「 ど ちら か 一 方 が 正しい 」、「 正 し く な い 」 な ど 、 条 件 を 判別 する た め の 演算 子 
で す 。 主 に if 構文 (p.024 参 照 ) の 条件 式 に 使用 し ます 。 ま た 、 多 く の 場 合 は 比較 演算 子 と 組み 
合わ せ て 次 の よう に 使用 し ます 。 


例 :if(a >= 5 && カ >= 10){ 
// a が 5 以上 で 、b が 10 以 上 の 場合 の 処理 
} 


比較 演算 子 


2 つの 値 の 比較 を 行う 演算 子 で す 。 数 値 の 大 小 を 比較 し た り 、 文 字 列 の 一 致 を 調べ た り 、 値 
が true と false の どちら で ある か を 調べ た りす る 際 に 使用 し ます 。 結果 は true ま た は false の い 
ずれ か に な り 、 さ ま ざ ま な 構文 の 条件 式 に 使用 され ます 。 以下 に if 構文 (p.024 参 照 ) で の 例 を 
示し ます 。 





例 1 :if(a < 10){ 
// a が 10 未 満 の 場合 の 処理 
} 


例 2 :if(7a77e != "7){ 
// 変数 name が 空白 文字 で は な い 場 合 の 処理 


} 


例 3 : ザ (7es == true){ 
// 変数 res の 値 が true で ある 場合 の 処理 
} 


有 代入 演算 子 ( 複 合 代入 ) 


」avaScript に お ける 「=」( イ コー ル ) は 左辺 の 変数 に 右辺 の 値 を 代入 する た め の も の で す 。 た 
と えば 、 演 算 の 結果 や 文字 列 の 結合 結果 を 代入 し ます 。 





例 1 :g = 12 + 5: // 演 算 の 結果 を 代入 
例 2 :a77e = "田村 " +" 明 "z // 文 字 列 の 結合 を 代入 


また 、 代 入 演算 子 「+=」 と 組み 合わ せ て 次 の よう に 使用 する こと も で きま す 。 





例 :7g77e = "田村 "+" 明 "> 
73776 += "さん " // name の 値 は "田村 明 さ ん "と な る 
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| 演算 子 の 優先 順位 


演算 子 に は 優先 順位 が あり 、 演 算 は その 順序 に 従っ て 行わ れ ま す 。 式 に 同じ 優先 順位 の 演算 
子 が あっ た 場合 は 、 基 本 的 に は 左側 か ら 順 番 に 演算 が 行わ れ ま す 。 

下 の 例 で は 演算 子 の 優先 順位 に 従っ て 演算 が な され 、 結 果 は 42 に な り ま す 。[10*440, 
6/3=2., 40+2=421] 





例 :』= 10*4+6/3: 


命令 を ( ) で 囲む と 、 演 算 子 の 優先 順位 に 関わ ら ず 括弧 内 の 計算 が 先 に 行わ れ 、 下 の 例 の 結 
果 は 60 と な り ま す 。 [6/3=2. 4+2=6, 10*6=60] 


例 : り = 10*(4+6/3): 


下 の 表 は 演算 子 の 優先 順位 を 高い 順に 並べ た も の で す 。 同じ 行 に ある も の の 優先 順位 は 同等 
に な り ま す 。 
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に た で 】【@W0 に / 


| 


秒 件 分 岐 | 





プロ グラ ム は 通常 上 か ら 下 へ 順番 に 処理 され て いき ます が 、 複雑 な プロ グラ ム で は ユー ザー 
の 動作 や 環境 な ど に よっ て 処理 を 分 ける 必要 が 生じ ます 。 条件 に よっ て 処理 を 分 ける 条件 分 岐 
の 構文 に は 、2 通 り の 処理 に 分 岐 する 「if-else 構 文 」 と 、 複 数 の 処理 に 分 岐 す る 「switch 
Case 構文] が あり ます 。 





条件 が 真 か 偽 か で 処理 を 分 ける (if こ else 構 文 
f(A)t 
2 


)else{ 
全 、 







の 条件 廊 が 真 で ある 場合 の 処理 
Paem2 条件 文 が 偽 で ある 場合 の 処理 






if 文 は 、 条 件 分 岐 の 制御 構文 の 1 つ で す 。 

条件 文太 が true( 真 ) の 場合 は 処理 多 が 実行 され 、false( 偽 ) の 場合 は 処理 A が 実行 され ます 。 
true の 場合 の み 処理 を 行い た い 場 合 は 、else 以 下 を 記述 し ませ ん 。else if…… の よう に else の 
後に if を 続け て 、 さ ら に 条件 を 分 岐 させ る こと も 可能 で す 。 


024 | BASIC09 





: if 条件 a) ーー…⑳…> 且 を 
H 処理 1 H 華 …: H 
: else : ーー …) 用 理 2 H 
! 処理 2 : : 
: if( 条 件 a) * 3 
| ele fb) | 際 和 1 の …> 隊 古 
5 処理 2 の 際 札 …: 5 
: else H …… 人 の …> 困 吾 : 
: 処理 3 : 


な お 、 複 数 の 処理 を 行い た い 場 合 に は 、 そ れ ら の 処理 全体 を す で く くり ます (下記 コラ ム 参 
照 )。 処 理 が 1 行 だ け で あれ ば 、if( 太 ) 久 : の よう に 1 を 省略 で きま す 。 


Column 複 文 (ブロ ッ ク ) 

1 で 囲ま れ た 部 分 は 複 文 (ブロ ッ ク ) に な り ま す 。 

if 構文 や while 構文 な ど と ど では 、 す ぐ 後 ろ の 1 つの 命令 し か 実行 され ませ ん が 、11 で 囲む こと に よっ 
て 、 複 数 の 処理 を まとめ る こと が で きま す 。 


if( 条件 1 ) 
処理 1: // 条 件 1 の と き 実 行 さ れる の は 処理 1 の み 
処理 2: 


if( 条件 1 ){ 

処理 1: // 条 件 1 の と き 実 行 さ れる の は 処理 1 と 処理 2 
処理 2: 

} 


この よう に 1 | で 囲ん だ 場合 は 1 つの ブロ ッ ク と 見 な され る の で 、 そ の 中 に 記述 され て いる すべ て 
の 処理 が 実行 され ます 。 
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ます 。 


アク セス され た 時 刻 を 取得 し て 、 そ の 時 刻 の 範囲 に 応じ て if 重文 で 処理 を 分 け て い 







7oggy = new Date(): 
/ = 7 の ggy.getHours(): 
if((h > 5) && (h <= 10)) // 条件 1.6 時 か ら 10 時 まで の 場合 
document.write ("お は よう ご ざい ます 。『): 
else if((7 > 10) && (/ <= 17)) // 条件 1 が 倉 で か つ 、 条 件 2:11 時 か ら 17 時 まで の 場合 
document.write ("こん に ち は 。『): 
else // 条件 2 も 偽 : そ れ 以 外 の 場合 
document.write(" こ ん ば ん は 。『"): 


document.write ("た だ いま "+ カ + "時 で す 。"): // す べ て で 実行 さわ る 処理 










お は よう ご ざい ます 。 た だ いま 8 時 で す 。 


こん に ち は 。 た だ いま re 時 で す 。 


こん ば ん は 。 た だ ! は ue 。 





アク セス され た 時 刻 を 取得 し て 、 そ の 時 刻 の 範囲 に 応じ て 処理 を 分 け て いま す 。 
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条件 に よっ て 複数 の 処理 を 振り 分 ける (Switch て case 構 文 ) 
switch( 太 ) { 

Case 今 1: 41: break: 

case 人 金 2: 42: break: .… 
default: 人 > 


条件 
全 … 値 (1. $2. …) 
MR 処理 (41, 42, …) 






switch 文 は case で 定義 され た 複数 の 選択 肢 の 中 か ら 条件 の 値 に 合う も の を 選び 、 そ の 処理 
を 実行 し ます 。 条 件 の 値 が case で 定義 し た どの 値 に も 当て は ま ら な か っ た 場合 は 、default に 
進み ます 。 


処理 を 抜け る に は break 文 を 記述 し ます (p.035 参 照 )。 た と えば 次 の 例 で は 、 文 が 金 1 の と 
き 4 1 の み が 処 理 さ れ 、 災 が 金 2 の と き 42 の みか が 処理 され ます 。 


例 : switch(X) { 
Case 金 1: 41: 
Ccase 金 2: 42: break: 
Ccase 3: 43: break: .… 


} 

















時 病 開 本 サン ブル で は 曜日 を 0 か ら 6 まで の 数 値 (日 曜 =0、 月 曜 =1…… 土 曜 =6) で 返す メソ 
解 説 の ッ ド getDay() の 値 に よっ て 、swich 構 文 で 処理 を 分 岐 し て いま す 。 


Source 


today = new Date(): 
switch(today.getDay() ){ 
case 0: // 値 0( 日 曜 ) を 返す 場合 
document.write(" 今 日 は 日 曜 ! 寝 て る ? 遊び に 行く ?『): 
break: 


Case 6: // 値 6( 土 曜 ) を 返す 場合 
document.write(" 明 日 は 日 曜日 ! 計画 は 万 全 だ よね ? 『"): 
break: 

default: // その 他 の 値 ( 平 日 ) の 場合 
document.write(" お 仕事 が ん ば っ て くだ さい ! 『): 
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< っ RW 
お 仕事 が ん ば っ て くだ さい ! 


明日 は 日 曜日 ! 計画 は 万 全 だ よね ? 


今日 は 日 曜 ! 寝 て る ? 遊び に 行く ? 





アク セス し た 曜日 に よっ て 表示 され る メッ セー ジ が 変化 し ます 
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EEIeKIO 敵 証 議 議 詳 議 謗 = = =〈'6 .'…t ゆ 〔 あ ※ ぽ ぼ 
繰り 返し 処理 





処理 を 繰り 返す 構文 に は 、 繰 り 返 す 回 数 を 指定 する for 文 と 、 条 件 が 満た され て いる 間 繰 り 
返す while 文 が あり ます 。 処理 を 繰り 返す 回 数 が 決ま っ て いる と き は for 文 、 繰 り 返 す 回 数 が 
決ま っ て いな いと き は while 文 を 使用 し ます 。 


指定 回 数 だ け 処 理 を 繰り 返す (for 文 ) 
for( 太 : : ^){ 
@ 






処理 を 指定 回 繰り 返し た いと き に 使用 する 構文 で す 。 ま すず 変数 に 初期 値 衣 を 設定 し 、 条 件 
が true の 間 、 処 理 借 を 実行 し ます 。 処理 を 1 回 実行 する ご と に 、4 に ある 式 に 基づき 変数 の 値 
が 増減 し ます 。 
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移 1 か ら 5 まで の 数 を 加算 し て いく サン プル で す 。 変数 (の 初期 値 を 1 と し 、 i が 6 より 小 
さい 間 (5 以 下 の 間 )、for 文 で 処理 を 繰り 返し ます 。 処理 を 1 回 行う ご と に i は 1 増加 
(は +) し て いき ます の で 、 処 理 は 5 回 行わ れる こと に な り ま す 。 





ト 1 1 Le ココ 





1 か ら 5 ま で の 数 を 1 ずつ 加算 し て いき ます 
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すべ て の 値 に 処理 を 繰り 返す (for 文 ) 
for( in $){ 
全 





オブ ジェ クト 金 の 持つ 値 ま た は 配列 の 値 す べ て に 対し て 、 そ れ ぞ れ 順 番 に 4 を 実行 し ます 。 
変数 肥 に は オブ ジェ クト や 配列 の イン デック ス が 順番 に 格納 され ます 。 


委 | 属性 の 名 前 : 値 . 属性 の 名 前 : 値 , .…J] と いう 書式 で それ ぞ れ の 属性 が それ ぞ れ の 値 を 
持つ オブ ジェ クト を 作成 で きま す 。 こ こ で は 作成 し た オブ ジェ クト の 属性 を すべ て 
書き 出し て いま す 。 配列 で は 属性 の 名 前 の 代わ り に イン デック ス の 数 字 が 列挙 され 








人 http://wwwrshoeisha.com/book/ 


XX-1234-5678 


作成 し た オブ ジェ クト で 参照 
で きる すべ て の プロ パテ ィ と 
その 値 が 書き 出さ れ ま す 





BASIC.10 | 031 














条件 が 真 の 間 、 処理 を 繰り 返す ① (While 文 ) 
while(X){ 
2 






条件 が 満た され る まで 、 処 理 を 繰り 返す 制御 構文 で す 。 
条件 太 が true( 真 ) の 間 、 処 理 多 を 繰り 返し ます 。 最 初 か ら 条 件 が 満た され て いな か っ た 場 
合 、 処 理 金 は 一 度 も 行わ れ ま せん 。 


入力 され た 名 前 を 表示 する サン プル で す 。 サン プル で は 、 ま ず 変 数 res の 初期 値 を 
N 空 の 文字 列 (") に 設定 し て お きま す 。 そ の 後 、 文 字 入力 ダイ アロ グ を 表示 し て 名 前 
の 入力 を 促し 、[ キ ャ ン セ ル ] ボ タン が クリ ッ ク さ れ た 場合 と 何 も 入力 され て いな い 
合 は while 文 で 処理 を 繰り 返し て いま す 。 








[キャ ン セ ル ] ボ タン を クリ ッ ク 、 ま た は 空欄 の まま [OK] ボ タン を 
クリ ッ ク す る と 、 ダ イア ログ が 繰り 返し 表示 され ます 
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- ロ 要 宇 
losesowsnee ・ 田 QB 








名 前 を 入力 し 、[OK] ボ タン を クリ ッ ク す る と 、 変 数 res に 値 が 代入 され ます 


し 人 mvesoptsampe 。 x 
よう こそ ! 翔 泳 太郎 さん 





繰り 返し が 終了 し 、 先 の 処理 が 行わ れ ま す 
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条件 が 真 の 間 、 処理 を 繰り 返す ② (While 文 ) 


do { 
2 
} while( 太 ) 










条件 が true( 真 ) の 間 、 処 理 多 を 繰り 返し ます 。 前 項 の while 文 で は 最初 か ら 条件 が 満た さ 
れ て いた 場合 は 一 度 も 処理 が 行わ れ ま せん が 、「do~while 文 」 で は 処理 の 実行 後に 条件 判断 が 
行わ れる た め 、 最 初 か ら 条 件 が 満た され て いな か っ た 場合 で も 最低 一 度 は 処理 が 実行 され ます 。 


ッ ク さ れ た 場合 と 何 も 入 力 さ れ て いな い 場 合 は do ~- while 文 で 処理 を 繰り 返し て 
いま す 。 
実行 結果 は 前 項 の サン プル と 同様 で す 。 


RW 間 本 まず 文字 入力 ダイ アロ グ を 表示 し て 名 前 の 入力 を 促し 、[ キ ャ ン セ ル ] ボ タン が クリ 
解説 の 





do { 


7es = prompt( "名 前 を 入力 し て くだ さい 。 "9): 
} while((/es == "") | (res == nulU): 
document.write(" よ うこ そ ! <b>"+ 7es + "</b> さん "): 
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ECEIe 還 議 議 議 議 議 議 議 証 "= = # ぞ を #%… 
繰り 返し の 制御 


break 処理 か ら 抜け 出す 
COIt1 UI 捧 り 返し 処理 の 先頭 に 戻る 





繰り 返し 処理 や 分 岐 処理 か ら 抜け 出す 構文 で す 。 


圏 break 

for、while、do な どの 繰り 返し 処理 や switch に よる 分 岐 か ら 抜け 出し ます 。 繰り 返し 処理 
の 内 部 で さら に 繰り 返し 処理 が 行わ れ て いる 場合 は 、 一 番 内 側 の 繰り 返し 処理 を 抜け 出し ます 。 
switch で は break を 記述 し な いと 次 の case や default の 処理 に 進ん で し まい ます 。1 つ の case 
の 処理 を 記述 し た ら 、 必 要 に 応じ て break で 抜け 出し て くだ さい (p.027 参 照 )。 


圏 continue 
繰り 返し の その 回 の 処理 を 中 断 し 、 処 理 の 先頭 に 戻っ て 継続 し ます 。 繰り 返し 処理 の 内 部 で 
さら に 繰り 返し 処理 が 行わ れ て いる 場合 は 、 一 番 内 側 の 繰り 返し 処理 の 先頭 に 戻り ます 。 


本 本 サン プル で は 3 回 パ バス ワー ド チ ェ ッ ク を 繰り 返し ます 。 た だ し 、 途 中 で パス ワー ド 
解 説 (の が 一 致し た 場合 は break で 繰り 返し 処理 を 抜け 出し て ペー ジ を 表示 し て いま す 。 


Source 


c7ec ん = false: 
for(7 = 0: 7 <3: 7 ++){ // 処 理 を 3 回 繰り 返す 
3ss = prompt(" パ スワ ー ド を 入力 し て くだ さい 。"。"* キ まま を まま すり) 
f(pass == "password"){ 
check = true: 
break: // パ スワ ー ド が 一 致し た ら for 構 文 を 抜け 出す 


} 
alert(" パ スワ ー ド が 違い ます 。『"): 


} 
if(c7ec ん == false) //3 回 の 処理 後 も 一 致し て いな けれ ば nogood.html へ 移動 
location.href = "nogood.html": 
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昌 





for 構 文 を 繰り返し ます 





3 回 繰り 返す 前 に パス ワー ド が 合致 すれ ば 、break で for 構 文 を 抜け 出し ます 
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に た や 】【@ 衝 4 










人 ム = neW 文 ( 多 , 金 …, ) 新しい オブ ジェ クト を 作成 


delete @ オブ ジェ クト を 削除 
with ( 罰 ) マ オブ ジェ クト 名 を 省略 し て 処理 を 記述 
this 参照 中 の オブ ジェ クト を 示す 


^… 新 し い オ ブ ジェ クト の 名 前 
…… そ の オブ ジェ クト 作成 用 の 関数 
る …3 上 数 [省略 可 】 
@… オ ブ ジ ェクト 名 

ーー オブ ジェ クト 名 


オブ ジェ クト を 作成 し た り 削 除 し た りす る 制御 構文 で す 。 


画 new ス テー トメ ント 

オブ ジェ クト を 作成 し ます 。new に 続け て オブ ジェ クト 作成 用 の 関数 を 呼び 出し ます 。 よ 
く 使わ れる も の に は 、Array( 配 列 )、Date( 日 付 )、Image( 画 像 )、Object( オ ブ ジ ェクト ) な 
ど が あり ます 。 作成 用 の 関数 を 自分 で 定義 すれ ば 、 独 自 の オブ ジェ クト を 作成 する こと も で き 
ます 。 


画 delete 演 算 子 
オブ ジェ クト を 削除 し ます 。 


一 with ス テー トメ ント 
指定 し た オブ ジェ クト に 対す る 処理 を 行い ます 。with を 使用 する と 、 オ ブ ジ ェクト 名 の 記 
述 を 省略 で きま す 。 


一 this ス テー トメ ント 
イベ ント ハン ドラ 内 な ど で 参 照 中 の オブ ジェ クト を 示す こと が で きま す 。 
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(オブ ジェ クト ) の それ ぞ れ の 入力 欄 に 、 年 、 月 、 日 を 表示 し て いま す 。 さ ら に ボタ 

ン を クリ ッ ク し た 際 に this ス テー トメ ント に よっ て 関数 counter に オブ ジェ クト を 
渡し て いま す 。 こ れ に よっ て クリ ッ ク 時 に ボタ ン の 表面 の 文字 列 を 書き 換え る 際 、 
document.form1.b1 と いう 記述 を 省略 し て いま す 。 


電電 本 まず today と いう 日 付す ブ ジ ェクト を 作成 し 、document.form1 と いう フォ ー ム 
「 惑 の 







79gy = new Date(): // 日 付す ブ ジ ェクト を 作成 
77y7o77 = document.getElementById("77777"): 
with(7y/o777){ //document.form1 オ ブ ジ ェクト に つい て 以下 の 処理 を 行う 
ex77.value = 7oggy.getFullYear(): 
7ex72.value = 7ogy.qetMonth() +1: 
ex7 ヲ .value = 7oggy.getDate(): 
} 
ん g75/ =0: 
function cog7fe/r(o が 7){ 
ん g75 の 7++: 
og が 7.value=s" "+ Kg7577 + "の: //obj は document.form1.b1 の 代わ り 














} 








<bodV> 
<form id="70/777"> 
<D> 
<input type="text" name="7ex77" size="4" /> 年 
<input type="text" name="7ex72" size="2" /> 月 
<input type="text" name="7ex ヲ " size="2" /> 日 に 
</D> 
<input type="button" name="b1" value=" 0 "onciick="cog7fe/( 訪 )" /> 
回 クリ ッ ク ! 
</form> 
<Script type="text/javascript" src="object.js"></script> 
</body> 
















で ー 価 http:/wwwshoelsha.com/book/ C 『 
2013 件 l5 月 


回 織 ロ クッ ク ! 

















今日 の 日 付 が 表示 され 、 ボ 
タン を クリ ッ ク し た 回 数 が 
ボタ ン 表 面 に 表示 され ます 
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に た や 】【@ 香 に 】 


function 文 (){ 
全 





プロ グラ ム の 中 で 繰り 返し 行わ れる 計算 や 作業 を まとめ 、 何 度 で も 繰り 返し 使え る よう に し 
た も の を 関数 と 言い ます 。 javaScript で は 、 あ ら か じ め 用 意 さ れ て いる 関数 の ほか に 、 ユ ー ザ 
ー が 独自 に 関数 を 定義 で きま す 。 一 度 関数 と し て 定義 し て お け ば 、 簡 単に 一 連 の 処理 を 呼び 出 
し て 実行 させ る こと が で きま す 。 

関数 は 次 の よう に 定義 し ます 


較 関 数 名 

function に 続け て 任意 の 関数 名 を 、p.008 の よう な 命名 規則 に 沿っ て 指定 し ます 。 そ の 関数 
が 、 ど の よう な 処理 を 行っ て いる の か が わか りや すい 名 前 を 付け て お く と よい で し よ ょ う 。 本 書 
で は 任意 に 付け られ る 関数 名 を sg7 の よう に 斜体 で 記し て いま す 。 


固 引 数 

引数 と は 関数 内 で の 処理 に 必要 な 数 値 や 文字 列 な どの 情報 で 、 こ の 引数 の 値 を 変え れ ば 同じ 
関数 で も 処理 結果 を 変え る こと が で きま す 。 処理 に 引数 が 必要 な 場合 は 、 渡 され た 引数 を 関数 
が 呼び 出さ れ た 時 に 受け 取る た め の 変 数 を () 内 に 指定 し ます 。「,」( カ ンマ ) で 区 切れ ば 複数 の 引 
数 を 指定 可能 で す 。 引 数 が 必要 な いと き は 、 空 の まま に し て お きま す 。 


較 定 義 す る 内 容 

関数 で 実際 に 定義 する 内 容 は { ! の 間 に 記述 し ます 。 関数 の 中 か ら 他 の 関数 を 呼び 出す こと も 
で きま す 。 

次 の 関数 msg2 は ダイ アロ グ を 表示 し た 後 、 関 数 msg3 を 呼び 出す と いう 2 つの 動作 を 行う も 
の と し て 定義 され ます 。 
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例 :function 7s92{ 
alert( "この 関数 は onclick に よっ て 呼び 出さ れ ま し た 。"): 
7759?( り : 
} 


画 return 
return は 関数 の 処理 を 終了 し 、 呼 び 出し 元 に 処理 を 返し ます 。return の 後に 値 (戻り 値 ) を 指 
定 する と 、 呼 び 出し 元 に その 値 を 返す こと が で きま す 。 


例 :function 7W7g7c(){ 
alert("OK"): 
return 1: 


} 


7 = 7M77c(): // | に は 1 が 入る 


玉 関 数 の 呼び 出し 

function は 関数 を 定義 むす る だ け な の で 、 ス クリ プ ト が 読み 込ま れ た だ け で は 実行 され ませ 
ん 。 実際 に 動作 させ る に は イベ ント や ほか の 関数 に よっ て 関数 が 呼び 出さ れる 必要 が あり ます 。 
これ を 関数 の 呼び 出し と 言い 、 関 数 名 () の よう に 記述 し ます 。 


ト 1 Le っ 


function 77sg7{ 
alert( "ペー ジ を ロー ド す る と 関数 msg1 が 呼び 出さ れ ま す "): 


} 

function 太 s92(8){ 
alert( "ボタ ン を クリ ッ ク す る と 関数 msg2 が 呼び 出さ れ ま す 。 引数 は " + a+ "です 。 め 
7593/ 


} 
function 77sg3 り { 

alert(" 関 数 msg3 は 関数 msg2 の 内 部 か ら 呼び 出さ れ ます "): 
} 


Source 


<body onload="7sg7 の "> 
<form id="sample_form"> 
<input type="button" value="Cick!" onclick="7sg2(2)" /> 
</form> 
</bodV> 
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数 msg1 が 実行 され ます 。 ボ タン が クリ ッ ク さ れ た と き に は 関数 msg2 が 実行 され 
ます 。 関数 msg2 の 中 で は 関数 msg3 の 呼び 出し が 行わ れる の で 、 続 け て 関数 msg3 
が 実行 され ます 。 


隊 サン プル で は まず ペー ジ の 読み 込み が 完了 し た と き (onload イ ベン ト 発 生 時 ) に 関 


- ロ 居 泊 
③⑨g htp:/wwwshoesha combook/ で | 人 wasoptsame x 国 還 Q 











ペー ジ の 読み 込み 時 。 関 数 msg1 が 実行 され ます 











< @ [ts:/ww shomsha comVbook/ で | 人 8 Javasonpt sample 


Pa 





砂 タ ン を グリ ゅ ク す る と 関数 msg2 が 呼び 出さ れ ま す 。 引数 は 2 で す 。 
全 


に 集 。 』 





[Click!l ボ タン を クリ ッ ク す る と 、 関 数 msg2 が 実行 され ます 


- ロ 認 渦 
@③⑨g http:/wwvahoesha combook/ で | ほ wasaptsampe  x 症 思 5 











人 、 imsg3 は 季 msg2 の 内 部 か 出さ 1 ま す 
に | 


関数 msg2 か ら 呼 び 出さ れ た 関数 msg3 が 続け て 実行 され ます 
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に た や [用 





DOM と は Document Object Model の 略称 で 、HTML/XHTML や XML の た め に W3C に よ 
つて 標準 化 さ れ た 規格 で す 。 特定 の プロ グラ ム 言 語 を 対象 と し た も の で は な く 、 さ ま ざ ま な ス 
クリ プ ト や プロ グラ ム 言 語 か ら HTML/XHTML 文 書 や XML 文書 に アク セス し て 操作 する 手段 
を 定義 し て いま す 。 

DOM で は 文書 を 構成 する 各 要 素 を ツリ ー 構 造 で 扱い ます 。 こ の DOM ツ リー を 構成 する 要 
素 は ノー ド と 呼ば れ ま す ( 要 素 ノー ド )。 ま た 、DOM で は HTML/XHTML の 要素 だ け で な く 属 
性 や 要素 内 容 の テキ スト な ども ノー ド と し て 扱わ れ (属性 ノー ド 、 テ キス トノ ー ド ) 操 作 の 対象 
に な り ま す 。 

階層 構造 を と っ て いる 点 か ら 、 上 位 の 階層 の ノー ド は 親 ノ ー ド 、 下 位 の 階層 の ノー ド は 子 ノ 
ー ド 、 子孫 ノー ド と 表現 する こと も で きま す 。 

DOM を 利用 すれ ば 、HTML/XHTML の 要素 を すべ て JavaScript の オブ ジェ クト と し て 操作 
し 、 ペ ー ジ の 表現 を その 場 で さま ざま に 変更 する こと が 可能 に な り ま す 。 

DOM の 仕様 は 現在 レベ ル 3 ま で 公開 され て いま す が (2013 年 5 月 現在 )、 そ の 対応 状況 は 各 
ブラ ウザ や バー ジョ ン に よっ て 異な っ て いま す 。 本 書 で は 、 一 般 的 な ブラ ウザ が 現時 点 で ほぼ 
対応 し て いる 基本 的 な プロ パテ ィ や メソ ッ ド に 絞っ て 解説 し て いま す 。 
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Source 





上 記 の よう な XHTML フ ァイル を DOM ツ リー で 表す と 次 の よう な 構造 に な り ま す 。 
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に た や 】【@ 衝 に ) 





近年 JavaScript が 再度 注目 を 集め て いる 理由 の 1 つ に 、Google マ ッ プ (ビュ ー の 移動 や 縮尺 
の 変更 、 衛 星 写真 へ の 切り 替え を 行う 際 、 地 図 の 再読 み 込み を 必要 と し な い 機 能 を 持つ ) や 
Google サ ジェ スト (検索 窓 に 文字 を 入力 する と 、 次 の 入力 を 予想 し 、 リ アル タイ ム で 候補 に 
な りう る 言葉 を 表示 する 機能 ) な ど で 利 用 され て いる Ajax の 人 気 が あ り ま す 。 

Ajax と は 、Asynchronous JavaScript 十 XML( 非同期 的 な javaScript + XML ) の 略語 で 
あり 、 こ の 言葉 を 提唱 し た jesse james Garrett に よれ ば 、 次 の よう に 定義 され て いま す 。 
( Ajax: A New Approach to Web Applications http://Wwwadaptivepath.com/ideas/ 
essays/archives/000385.php) 


・XHTML と CSS を 使っ た 標準 技術 に 基づく プレ ゼン テー ショ ン 

・Document Object Model を 使っ た ダイ ナミ ッ ク な 表示 と イン タラ クティ ブ な 仕組 み 
・XML と XSLT を 使っ た デー タ の 変換 や 操作 
・XMLHttDRequest を 使っ た 非同期 的 な デー タ の 取得 

・ そ れ ら を javaScript に よっ て 結び つけ る 


つま り Ajax と いう 1 つの 技術 が ある の で は な く 、 avaScript、CSS、XML、 加 えて サー バ 側 
の Web ア プリ ケー ショ ン ( PHP、Perl、 java、DB な ど ) の よう な 、 既 存 の 技術 を 組み 合わ せる 
こと で 実現 され る Web ア プリ ケー ショ ン の 新しい 方 法 を 総じて Ajax と 呼ん で いる の で す 。 

こう し た 中 で 特に 注目 され た の が XMLHttpRequest と いう javaScript の HTTP 通 信 機 能 で す 。 
XMLHttpRequest は HTTP プ ロト コル を 使っ て XML デー タ を 要求 する オブ ジェ クト で あり 、 
サー バ か ら 非 同期 的 に デー タ を 取得 で きま す 。 実際 に は XML デー タ だ け で な く 、 テ キス ト デ 
ー タ も 扱え ます 。 

従来 の Web ブ ラウ ザ を 使っ た アプ リケーション で は 、 サ ー バ に デー タタ を 送信 し て 処理 結果 
を 得る に は 、 ユ ー ザ ー 側 で ボタ ン を 押す な ど し て 、 意 図 的 に WWeb ペ ー ジ を 先 に 進め な けれ ば 
な り ま せん で し た 。 し か し Ajax で は 、 サ ー バ と 非同期 通信 を 行い 、 指 定 し た URI か ら XML な 
どの デー タ を 逐一 読み 込む こと で 、 ペ ー ジ の 天 移 を 行わ ず に 表示 内 容 を 動 的 に 変化 させ る こと 
を 可能 に し て いま す 。 
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に た や 】【@ 得 【5 





HTML5 に つい て 


HTML5 は Web ペ ー ジ を 記述 する の に 使用 され る HTML(Hypertext Markup Language) 仕 
様 の 第 5 版 で あり 、HTML4.01/XHTML1.0 の 後継 と し て 位置 づけ られ て いま す 。 単に 最新 の 
改訂 版 で ある と いう だ け で は な く 、 こ の 間 の Web 環 境 の 変化 に 対応 する 、 大 規模 な 変更 が 盛 
り 込ま れ た も の と し て 、 大 い に 期 待 さ れ て いま す 。 





田 狭 義 の HTML5 

狭い 意味 で の HTML5 は 、HTML4.01/XHTML1.0 に 対す る 、 要 素 の 増減 や 文法 の 変化 を 含み 
ます が 、 こ の 方 面 で は 、 header 要 素 や footer 要 素 、article 要 素 や section 要 素 な ど 、 ヘ ッ ダ 
一 部 や 記事 や 節 と いっ た 、 文 書 の 意味 的 な まとまり を 表す 要素 が 追加 され 、 逆 に 、font 要 素 な 
どの 、 視 覚 的 な 表示 を 直接 指定 する 要素 が 削ら れ ま し た 。 こ れ は 、 文書 を 意味 に よっ て 構造 化 
し 、 外 観 は CSS に よっ て 規定 する と いう 従来 か ら の 方 向 性 に の っ と っ た も の で す 。 


一 方 で は 、 プ ラグ イン に 依存 する こと な く 、HTML 標 準 自 体 が 、 動 画 や 音声 な ど を 表示 する 
こと が で きる よう に 、 専 用 の 要素 と し て video 要 素 や audio 要 素 が 追加 され まし た 。 こ れ に は 、 
ブラ ウザ で の 高度 な 表現 が 求め られ る 中 、 特 定 の ベン ダー の 技術 や 意向 に 左右 され る 状況 は 望 
まし く な いと の * 判 断 が あり ます 。 も っ と も 、 対 応 フ ォ オー マッ ト に つい て は まだ 紀 奈 曲折 が 予想 
され る 状況 で す 。 


田 広 義 の HTML5 

広い 意味 で の HTML5 に は 、CSS3 標 準 め や 、 ス クリ プ ト か ら 操 作 す る さま ざま な 新 API な ど が 
含ま れ ま す 。 こ れ に は 、CSS5 ア ニメーション 、CSS で の 3D 変 形 操作 、VWeb フ ォ ン ト 、 モ バイ 
ル デ バ イス 対応 AP 1 、 オ フラ イン 操作 、 ネ ットワーク 通信 、SVG や Canvas な ど に よる グラ 
フィ ックス 操作 と いっ た も の が 挙げ られ ます 。HTML5 の うち 、 本 書 が 取り 扱う の は 主 に この 
中 で も javaScript が 関係 する 部 分 に な り ま す 。 
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HTML5 登 場 の 背景 


で は 、HTML5 は どの よう な 文脈 の 中 で 登場 し て きた の で し ょ うか 。 





HTML5 以 前 に は Web 標 準 を 策定 する 機関 で ある W3C は HTML を XML と し て 再 構 成す る 
XHTML を 推進 し て お り 、XHTML1 系 の 後継 と し て XHTML2.0 仕 様 の 策定 を 目指 し て いま し た 。 
し か し 、 完 全 な XML ベー ス へ の 移行 は い 、 す で に 普及 し た 仕様 で ある HTML4.01 と の 互換 性 を 
損なう 面 が あり 、 ま た 、 ブ ラウ ザ に よる 高度 な 表現 や 、Web ア プリ ケー ショ ン の 様々 な 要求 
に も こたえ る も の で は あり ませ ん で し た 。 


そこ で W3C と は 別に 、Apple、 Mozilla、Opera な ど が 中 心 に な っ て WHATWG(The 
Web Hypertext Application Technology Working Group) と いう 組織 が 独自 に 立ち 上 げ 
られ 、 高 機能 な Web ア プリ ケー ショ ン の ニー ズ に 対応 する こと を 目指 し た 、 新しい Web 標 準 
(Web applications 1.0) の 策定 が 開始 され まし た 。 こ の 独自 に 策定 され た 標準 は 、 
WHATWG 自 身 か ら の 強い 働き か け も あっ て 、2007 年 に は つい に W3C の 公式 な 標準 化 プロ 
セス の 対象 と な り 、 以 後 、 両 者 の 協調 の も と に 開発 が 進め られ 、 現 在 の 「HTML5」 へ と 至っ て 
いま す 。 


XML/XHTML を 推進 する と いう W3C の 方 針 の 基礎 に あっ た の は 、 意 味 的 に タグ 付け され た 
XML/XHTML 文 書 へ の 移行 に よっ て 、 そ の 「 意 味 」 を 「 理 解す る 」WVeb を 実現 し よう と いう 壮大 
な 構想 で し た 。 こ れ を セマンティック ・ ウ ェ ブ と 呼び ます 。 し か し 市 場 の ニー ズ は むし ろ 高 機 
能 な イン ター フェ イス や 高度 な 表現 力 の ほう に 傾き 、 な か な か 構想 が 進展 し て いる と は いえ な 
い 状 況 で し た 。 


そこ に HTML5 が 登場 し 、 結果 と し て それ まで W3C が 推進 し て いた XHTML2.0 は 2009 年 に 
放棄 され る こと に な り ま し た 。 と は いえ 、XHTML が 完全 に 廃止 され た わけ で は な く 、 HTML5 
で は 、HTML で の 記法 と XHTML で の 記法 と の 両方 許さ れる こと と な り ま し た (XHTML5)。 
また 、HTML5 で 追加 され た article 要 素 な ども 、 文 書 を 意味 的 に 構造 化し よう と いう セ マ ン テ 
ィ イッ ク ・ ウ ェ ブ の 方 向 性 に 沿う も の と いえ ます 。 
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l HTML5 で 追加 され た 要素 


田 ペ ー ジ 構造 化 の 要素 

HTML5 で 追加 され た 主 な 要素 と し て は 、header( 目 次 や ロゴ な どの ヘッ ダー 部 分 )、 
footer( 著 作 権 表 示 や サイ トマ ッ プ 、 関 連 リ ンク な どの フッ ター 部 分 )、article( 独 立 し た ひと 
まとまり の 記事 )、section( 章 や 節 と いっ た 文書 内 の セク ショ ン )、nav( リ ンク な どの ナビ ゲ 
ーション )、aside( 補 足 な どの 付随 的 な 情報 )、figure (図版 ) と いっ た 記事 の 意味 的 な まとまり 
を 表現 する も の が まず 挙げ られ ます 。 こ れ ら の 要素 は 、 実際 に ウェ ブ 上 の ペー ジ で 使わ れ て い 
る CSS の クラ ス 名 を 分 析 す る こと で 決定 され まし た (典型 的 な の は サイ ド バ ー の ある ブロ グ サ 
イト で す )。 





こう し た ペー ジ を 意味 的 に 構造 化し て 表現 する 要素 に は 、 通 常 の IE な どの ブラ ウザ 以外 の 、 
た と えば 視覚 障 得 者 向け ブラ ウザ な ど で 、 そ れ ぞ れ の 要素 の 意味 に 応じ た 最適 な 読み 上 げ を 行 
うこ と が 期待 で きま す 。 同様 に 、 そ れ ぞ れ の 要素 の 意味 が 明確 な 場合 、 検 索 エ ンジ ン が その 情 
報 を 利用 し て 、 よ り 詳 細 な 検索 を 行う こと も 考え られ ます 。 


較 input 要 素 

ユー ザー と の 高度 な や り 取り と いう 意味 で は input 要 素 に 加え られ た 変更 も 重要 で す 。 従来 
は フォ ー ム 入力 の 際 は 、 シ ンプ ル な 文字 列 で の 入力 が 基本 で 、 入 力 内 容 の チェ ッ ク も スク リプ 
ト で 独自 に 行う 必要 が あり まし た 。HTML5 で は 、 数値 や 、 日 付 メー ル ア ド レス 、 と いっ た 
入力 内 容 ご と の タイ ブ が 追加 され 、 タ イプ に よっ て は カレ ンダ ー や スラ イダ ー な どの グラ フィ 
カル な 入力 補助 が 提供 され る よう に な り ま す 。 


圏 メ ディ ア 関 連 要素 

ブラ ウザ に よる 高度 な 表現 と いう 意味 で は 、 ブ プラ グイ ン な し で の 音声 ・ 動 画 メ ディ ア の 再生 
の た め の 要 素 の 追加 も 影響 の 大 き な 出 来 事 で す 。 標 準 的 な メデ イィ アフ ォ ー マ ッ ト が 確定 し さえ 
すれ ば 、 ペ ー ジ の 作成 者 は 、 基 本 的 に は ユー ザー の 閲覧 環境 が Web 標 準 に 合致 し て いさ えす 
れ ば 、 提 供し よう と する メデ ィ ア を ユー ザー が 再生 で きる か どう か に それ ほど 悩ま ず に 済む よ 
うに な り ま す 。 


ほか に も さま ざま な 要素 が HTML5 で は 追加 され て いま す が 、 詳 細 は 本 書 の 姉妹 編 で ある 
「HTML5&CSS3 辞 典 第 2 版 ] を ご 覧 くだ さい 。 
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HTML5 API と javaScript 


さら に 、 広 い 意 味 で の HTML5 に は 、 最 新 の さま ざま な Web 関 連 の 技術 も 含ま れ ま す 。 一 つ 
に は デス クト ッ プ か ら ク ラウ ド へ の 移行 と いう 大 き な 流 れ に 沿っ た 、 高 機能 な Web ア プリ ケ 
ーション の た め の 技 術 、 さ ら に は スマ ー ト フォ ン や タブ レッ ト の 急速 な 普及 に 対応 する た め の 、 
モバ イル デバ イス 特有 の 機能 、 た と えば 位置 情報 や 各種 セン サー ヘア クセ ス す る API と いっ た 
も の が あり ます 。 





デス クト ッ プ 並み の 機能 を 有する 高度 な Web ア プリ ケー ショ ン を 実現 する た め の API と し て 
は 、 オ フラ イン に デー タ を 保存 する スト レー ジ 技 術 (VWebStorage、Indexed Database)、 
オフ ライ ン 時 に も 同じ よう に 動作 させ る た め の キ ャ ッシュ 技術 (App Cache)、 ロ ー カ ルフ ァ 
イル へ の アク セス (File API)、 ユ ー ザ ー と の 対話 を 中 断 さ せる こと な く バ ッ ク グ ラウ ンド で の 
処理 を 可能 に する 技術 (WWeb Workers) な ど が 用 意 さ れ 、 ブ ラウ ザ は 単なる アプ リケーション 
と いう より も ラン タイ ム 環 境 の よう な も の に な りつ つ あ り ま す 。 


グラ フィ カル な 表現 能力 へ の ニー ズ と いう 意味 で は XML で の ベク ター 画像 を 表現 する SVG、 
JavaScript に よる 描画 を 可能 に する Canvas、CSS3 に よる 高度 な 外観 の 指定 や アニ メー ショ ン 、 
変形 操作 と いっ た も の が あり 、 ス クリ プ ト か ら の 操作 も それ ぞ れ 可能 に な っ て いま す 。 


Ajax で 脚光 を 浴び た 通信 関連 で は 、WebSocket、Server-Sent Events と いっ た 双方 向 リア 
ル タ イ ム 性 を 重視 し た 通信 API が あり 、 従 来 の Ajax と 組み 合わ せる こと に より 、 画面 の リロ ー 
ド を 必要 と し な い 動 的 な 画面 の 書き 換え な ども 可能 に な つて いま す 。 


今後 ます ます ブラ ウザ の 側 の 対応 が 進む こと に より 、HTML5 を 利用 する こと で 、 高 度 な 表 


現 力 と 、 標 準 準拠 に よる 高い 互換 性 、 意 味 的 な タグ 付け に よる 可能 性 、 と いっ た も の を 両立 さ 
せ た サ イト や Web ア プリ ケー ショ ン が 可能 に な る も の と 考え られ ます 。 
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第 2 部 


javaSCrip 
リフ ァ レ ンズ 


JavaScript REFERENCE 


mm ダイ アロ グ 品 ヒ スト リー 
中 ドキ ュ メ ント ョ 変換 

ウィ イン ドウ m ョ 数 学 関数 
mm スク リー ン 中 オブ ジェ クト 


フォ ー ム m 関数 

mm イベ ント m 正規 表現 

mm タイ マー 中 DOM 

m 本 2 m 非同期 通信 

m ョ 日付 m 図 形 と メデ ィ ア 

m 文字 列 ョ m ファ イル 操作 

mm ブ ラウ ザ m ロ ー カ ル デ ー タ と オフ ライ ン 
m 画像 m 位置 情報 


m リ ンク 呈 文 法 ・ コ ア 








peIcT il 


警告 ダイ アロ グ を 表示 し た い 










文 .alert( 銘 ) 





文 …… 親 Window オ ブ ジ ェクト (ウィ ンド ウ 名 また は フレ ー ム 名 ) 【 省 略 可 】 
全 … ダ イア ログ に 表示 する 文字 列 や 数 値 





メソ ッ ド 






[OK] ボ タン の ある 警告 ダイ アロ グ を 表示 する メソ ッ ド で す 。 [OK] ボ タン が クリ ッ ク さ れる 
か [X] ボ タン で ダイ アロ グ が 閉じ られ る まで 、 ス クリ プ ト は 次 の 処理 へ 進み ませ ん 。 ま た 、 ダ 
イア ログ が 表示 され て いる 間 は ブラ ウザ の 操作 は 行え ませ ん 。 

ウィ ンド ウ 名 を 太 に 指定 し た 場合 、 指 定 し た ウィ ンド ウ に ダイ アロ グ が 表示 され ます 。 


alert(" 未 入力 の 項目 が あり ます 『): 
「 未 入力 の 項目 が あり ます 」 と いう 警告 ダイ アロ グ を 表示 し ます 。 


<a href="http://books.ank.co.jp/" onClick="alert( "書籍 け イト に 移動 し ます 。 ' ) "> 
リン ク が クリ ッ ク さ れ た と き 、「 書 籍 サイ ト に 移動 し ます 。」 と いう 警告 ダイ アロ グ を 表示 し ます 。 








Coluimn [ダイ アロ グ の 改行 ] 


ダイ アロ グ に 表示 する 文字 列 を 改行 し た い 場合 に は 、 以 下 の サ ンプ ブル の よう に 「\n」 を 挿入 し ま 
す 。 


"1 行 目 の 文字 列 を 記入 し ます \n" + "2 行 目 と \n" + "3 行 目 " 








ぁ ブラ ウザ 対応 表 IE10 IE9 13:) Fx Chrome Safari Opera iOS6 Android 
(の O 9 O O O 〇 O O O (⑳ 
3 照 確認 ダイ アロ グ を 表示 し た い ・ーー・ PO51 
ロ 文字 入力 ダイ アロ グ を 使い た い ーー・ P052 
【SAMPLE】 ダ イア ログ を 表示 する ・・ P053 
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r で 引 若 NHSI へ XXf 職 


Kec0 ア 4 


確認 ダイ アロ グ を 表示 し た い 


人 = 文 .confirm(^) 


全 変数 ([OK] で true、[ キ ャ ン セ ル ] で false が 代入 され る ) 
大 …… 親 Window オ ブ ジ ェクト (ウィ ンド ウ 名 また は フレ ー ム 名 ) [省略 可 】 
ム …… ダ イア ログ に 表示 する 文字 列 や 数 値 








メソ ッ ド 





[OK] ボ タン と [キャ ン セ ル ] ボ タン の ある 確認 ダイ アロ グ を 表示 する メソ ッ ド で す 。 い ずれ 
か の ボタ ン が クリ ッ ク さ れる まで スク リプ ト は 次 の 処理 へ 進み ませ ん 。 また 、 ダ イア ログ 表示 
時 は ブラ ウザ の 操作 は 行え ませ ん 。 [OK] ボ タン が クリ ッ ク さ れ た 場合 は true、 [キャ ン セ ル ] ボ 
タン また は [X] ボ タン が クリ ッ ク さ れ た 場合 は false を 値 と し て 返し ます 。 な お 、 文 を 指定 し 
た 場合 、 指 定 し た ウィ ンド ウ に ダイ アロ グ を 表示 し ます 。 









confirm( "本 当 に これ で いい ん で すね ? 『"): 
確認 ダイ アロ グ に 「 本 当 に これ で いい ん で すね ? 」 と 表示 し ます 。 


1f(confirm ("株式 会 社 アン ク の ペー ジ に 移動 し ます か ? ")){ 
location.href = "http://www.ank.co.jp/ ": 
} 





確認 ダイ アロ グ を 表示 し 、[OK] ボ タン が クリ ッ ク さ れる と http://Wwwank.cojp/ に 移動 し ます 。 





ょ ブラ ウザ 対応 表 IE10 1 13:) Fx Chrome Safari Opera iOS6 Android 
O O ( あ O 〇 O 〇 O O 〇 


| 参 照 警告 ダイ アロ グ を 表示 し た い ・・・・・・ 
ロ 文字 入力 ダイ アロ グ を 使い た い 


【SAMPLE】 ダ イア ログ を 表示 する ・・・ 








ー…・ PO50 
ー…・ PO052 
ー・P053 
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ーー 
ーー 


吊 


加 
らい 


r# で 引 苦 RENHS 和 へ 層 


い 


[NH へ 層 ] 











KeIcE 0 に 


文字 入力 ダイ アロ グ を 使い た い | 


@ = 文 .DromDt( 多 , ^) 


@…- 入 力 され た 文字 列 

…… 親 Window オ ブ ジェ クト (ウィ ンド ウ 名 また は フレ ー ム 名 ) [省略 可 】 
$… ダ イア ログ に 表示 する 文字 列 | 
^… 初 期 入力 され て いる 文字 列 【 省 略 可 】 








本 皇 メソ ッ ド 





文字 入力 欄 と [OK] ボ タン 、[ キ ャ ン セ ル ] ボ タン の ある ダイ アロ グ を 表示 する メソ ッ ド で す 。 
いずれ か の ボタ ン が クリ ッ ク さ れる まで 、 ス クリ プ ト は 次 の 処理 へ 進み ませ ん 。 ま た 、 ダ イア 
ログ 表示 時 は ブラ ウザ の 操作 は 行え ませ ん 。 

[OK] ボ タン が クリ ッ ク さ れ た 場合 は 入力 欄 に 入力 され て いる 文字 列 、[ キ ャ ン セ ル ] ボ タン 
また は [x] ボ タン が クリ ッ ク さ れ た 場合 は null を 値 と し て 返し ます 。 初期 状態 で 文字 入力 欄 に 
何 も 表示 し た く な い 場 合 は 、prompt(test'.") の よう に 2 つめ の 引数 A に 「"」( ダ ブル クオ ォ オー テ 
ーション ) の み を 記述 し て くだ さい 。 

な お 、 文 を 指定 し た 場合 、 指 定 し た ウィ ンド ウ に ダイ アロ グ を 表示 し ます 。 


prompt(" あ な た の 名 前 は ? "9): 
名 前 の 入力 を 求め る 文字 入力 ダイ アロ グ を 表示 し ます 。 初期 状 態 で は 入力 楓 に は 何 も 表 示し ませ 
ん 。 


/ass = Drompt( "合言葉 を 入力 し て くだ さい ", " 山 ): 
合言葉 の 入力 を 求め る 文字 入力 ダイ アロ グ (初期 状態 で は 入力 欄 に 「 山 」 と 表示 ) を 表示 し 、 入 力 さ 
れ た 文字 を 変数 pass に 代入 し ます 。 








ぁ p プラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 O (⑳) 9 〇 O O O @⑱) 
| 参照 警告 ダイ アロ グ を 表示 し た い ・……・ PO50 
品 確認 ダイ アロ グ を 表示 し た り い ーー PO51 
【SAMPLE】 ダ イア ログ を 表示 する ーー P053 
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DIALOG.SAMPLE-01 


ダイ アロ グ を 表示 する 





警告 確認 文字 入力 ダイ アロ グ を 使っ た ログ オン ペー ジ の サン プル で す 。 ユ ー ザ ー 名 が 入 
力 さ れ 、[ ロ グ オ ン ] ボ タン が クリ ッ ク さ れる と 、 ユ ー ザ ー 名 の 確認 ダイ アロ グ を 表示 し ます 。 
ユー ザー 名 が 未 入力 の 場合 は 警告 ダイ アロ グ を 表示 し ます 。 

確認 ダイ アロ グ に ユー ザー 名 が 入力 され 、[OK] ボ タン が クリ ッ ク さ れる と 、 パ スワ ー ド 入 
力 (文字 入力 ) ダ イア ログ を 表示 し ます 。 な お 、[ キ ャ ン セ ル ] ボ タン が クリ ッ ク さ れ た 場合 は 処 
理 を 終え ます 。 

パス ワー ド 入 力 ダ イア ログ に password と 入力 され る と 、 ユ ー ザ ー 名 入り の メッ セー ジ を 表 
示し ます 。 未 入 力 、 も し く は password 以 外 の 文字 列 が 入力 され た 場合 は 「 パ スワ ー ド が 正 し 
く あ り ま せん 」 と いう メッ セー ジ を 表示 し ます 。 また 、 パ スワ ー ド 入力 ダイ アロ グ の [キャ ン セ 
ル ] ボ タン が クリ ッ ク さ れる と 、「 パ スワ ー ド 入力 を 終了 し ます 」 と 表示 し 、 処 理 を 抜け ます 。 


// ダ イア ログ を 表示 させ る 関数 
function sow_g7a/og(){ 
Var /5e77g776e = document.qetElementById( "text1").value: 


if(/ser7a/7e == ""){ // ユ ー ザ ー 名 が 未 入力 の 場合 
alert( "ユー ザー 名 を 入力 し て 下さ い 。 『): 
Teturn: 


} 


Var /@s = Confirm ("ユー ザー 名 は " + gse/7g776e + "で よろ し いで すか ? 『): 
//confirm ダ イア ログ の 結果 を res に 代入 


評 (/es == true){ //「OK」 を 選択 
Var /a5S = prompt( "パスワード を 入力 し て 下さ いま まま まま まま 


f(pass == null){ // パ スワ ー ド が 未 入力 の 場合 
alert( "パス ワー ド 入 力 を 終了 し ます "): 


}else if(pass != "password"){ // パ スワ ー ド が "password" 以 外 の 場合 
alert( "パス ワー ド が 正しく あり ませ ん "): 

}else{ // 正 常 処 理 
document.open(): 
document.write(" よ うこ そ ", /se77g77e, "さん 1"): 
document.close(): 


} 
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<bodV> 
<form action="/cgi-bin/sample.cq1"> 
<Dp> ユ ー ザ ー 名 </D> 
<D> 
<input type="text" id="text1" size="30" /><br /> 
<input type="button" value=" ロ グ オ ン " onclick="show_dialog()" /> 
</D> 
</form> 
</body> 








侵 http://wwwshoesha.comVbooksux)St D ・ 呈 G | タイ アロ 2 を 表示 する 





ユー ザー 名 | 


ログ オン ーー 





作 ュー ザー 名 を 入力 し て 下さ い 





[L_w 





ユー ザー 名 が 未 入力 の 場合 は 警告 ダイ アロ グ が 表示 され ます 
- 世紀 
③ 縛 http-/www atokha nmybookauyJsL D ・ 8 G | 8 タイ 7 ロ 2e 表 示す S x 還 計 7 8 
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| ok || tw 


uo し 、 [ログ オン ] ボ タン を クリ ッ ク す る と 、 ユ ー ザ ー 名 の 確認 ダイ アロ グ が 表示 され 
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LM 。  。 Smmnni 














よう こそ 著 泳 花子 さん ! 





文字 入力 ダイ アロ グ に 「password」 と 入力 する と 、 メ ッ セ ー ジ が 表示 され ます 





| alert メソッド ーー ドー P050 
| 参照 2 confirm メソ ッ ド P051 


RONBKX7W お Ako20LEJcIsSz zosx っ と P052 
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記 amNIRy 議 議 議 議 証 昌 = =-' 
ドキ ュ メ ント を 扱い た い 


文 .dOcument 








胡 ……Window オ ブ ジ ェクト 【 省 略 可 】 | 
オブ ジェ クト | 





ペー ジ に 表示 され る 文字 列 や 画像 、 フ ォ ー ム 、 リ ンク な どの HTML/XHTML の ドキ ュ メ ント 
を 制御 する オブ ジェ クト で す 。 


document.write( "javaScript"): 
ドキ ュ メ ント に [javaScript」 と 書き 出し ます 。 


万 Co/ = document.fgColor: 
文字 色 を 変数 fCol に 代入 し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera iOS6 Android 
O 〇 O 〇 〇 O 〇 ⑤ O 〇 〇 
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記 XaWNE ツ 柱 議 議 議 請 。。= 〔… ぃ っ ## 


ドキ ュ メ ント を オー プン 
クロ ー ズ し た い 


文 .0Den( ) ドキ ュ メ ント の 出力 を 開始 
文 .close () ドキ ュ メ ント の 出力 を 終了 


TCS 人 


衣 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 








メソ ッ ド 





open メ ソ ッ ド と close メ ソ ッ ド は ドキ ュ メ ント を オー プン プク ロー ズ す る と き に 利用 し ま 
す 。 現在 の ドキ ュ メ ント に 対し て 使用 する と 、open() か ら close() の 間 で 指定 し た 内 容 で ドキ 
ユメ ント の 内 容 を 置き 換え ます 。 


open メ ソ ッ ド 
ドキ ュ メ ント を 開い て 、 書 き 出し 可能 な 状態 に し ます 。 


close メ ソ ッ ド 

ドキ ュ メ ント の 書き 出し を 終了 する メソ ッ ド で す 。 open メ ソ ッ ド で 書き 出し を 開始 し た ド 
キュ ユメ ント は 、 必 ず close メ ソ ッ ド で 書き 出し を 終了 させ て くだ さい 。 終了 し て いな い 場 合 は 
ペー ジ が 読み 込み 中 の 状態 の まま に な っ て し まい ます 。 


7ew 履 document.open(): 
ウィ ンド ウ newWin の ドキ ュ メ ント の 書き 出し を 開始 し ます 。 


7ey 妨 .document.close(): 
ウィ ンド ウ newWin の ドキ ュ メ ント の 書き 出し を 終了 し ます 。 





ぁ ブラ ウザ 対応 表 IE10 1 3:】 Fx Chrome Safari Opera iOS6 Android 


〇 O O O (⑳) O 〇 O O 


参 田 文字 列 や 画像 を 表示 し た い P058 
ピュ ユ 【SAMPLE】 文字 や 画像 を 表示 する ・・・・・・‥・ PO66 
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文字 列 や 画像 を 表示 し た い 


文 .Write ($) 文字 列 を 書き 出す 
文 。.Writeln ($) 文字 列 を 書き 出し て 改行 する 


娘 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 
る … 書 き 出す 文字 列 (HTML コ ー ド ) 








茹 旦 還 メ ソ ッ ド 





ドキ ュ メ ント に 文字 列 を 書き 出す メソ ッ ド で す 。 文字 列 中 の タグ は ペー ジ 上 の 表示 に 反映 さ 
れ ま す 。 

HTML ソ ー ス を 直接 書き 換え る の と 同じ 効果 が ある た め 、 あ る 意味 で 何で も で き て し まう メ 
ソ ッ ド で す 。 操作 を 間違え る と HTML の 構造 自体 が 壊れ て し まう た め 、 他 で 代用 で きる 場合 は 
推奨 され ませ ん 。 

デバ ッ グ 目的 で 画面 表示 を 行い た 場合 は 「console.Iog( 文 字 列 )」 と いう メソ ッ ド を 使う と 、 
ブラ ウザ の デバ パック 画面 (IE10 の 場合 、F12 で 開き ます ) に 書き 出し を 行う こと が で きま す 。 


write メソ ッ ド 
引数 と し て 与え られ た 文字 列 を ドキ ュ メ ント に 書き 出し ます 。 


writetn メ ソ ッ ド 
引数 と し て 与え られ た 文字 列 を 書き 出し た 後に 改行 文字 が 付加 され ます 。 な お 、 改行 を 有効 
に する た め に は 書き 出す 文字 列 を <pre>ー</pre> タ グ で 囲ん で お く 必 要 が あり ます 。 


document.write ("こんにちは 、" + ae + "さん 199: 


変数 name の 値 の 前 後に [こん に ち は 、」 と 「 さ ん ! 」 を つけ 、「 こ ん に ち は 、 XX さん ! 」 と 書き 出し ます 。 





document.writeln("<img srccat1.gif all=" ノ >"): 
画像 cat1.gif を 表示 し て 改行 し ます 。 








ブラ ウザ 対応 表 IE10 1 ギリ 1 Fx Chrome Safari Opera iOS6 Android 
O O 〇 O O O O O O ⑤ 〇 


| 参照 ドキ ュ メ ント を オー プン プク ロー ズ し た い ・・・P057 
ババ 【SAMPLE】 文 字 や 画像 を 表示 する ・・-・・・・・ PO66 
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pe リコ NIR 1 


最終 更新 日 を 自動 的 に 挿入 し た い 


文 .lastModified 





衣 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 








プロ パテ ィ 





ファ イル の 最終 更新 日 を 表す 文字 列 を 返す プロ パテ ィ で 、 ペ ー ジ の 最終 更新 日 を 自動 的 に 表 
示す る 場合 な ど に 使用 し ます 。 な お 、 ブ ラウ ザ の 種類 や OS 等 の 設定 に よっ て 、 返 され る 日 付 
文字 列 の 形式 は 異な り ます 。 


document.write("Last Update: " + document.lastModified): 


最終 更新 日 を 表示 し ます 。 














ぁ ブラ ウザ 対応 表 IE10 1 3: Fx Chrome Safari Opera iOS6 Android 
O O 〇 O O O O 〇 O O 
| 参照 日 付 を 取得 し た い ・ ドド ーーー P182 
mm 時 刻 を 取得 し た い ド ドド ドド ドド P185 
【SAMPLE】 ド メイ ン 情 報 を 取得 する -・・・…・ PO067 
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SetSNIROE 油 議 議 較 議 菩 。。 〔…' パ ぺ ペ { フ ぞ CV ぺ ぷよ ょ 』 よ m ま ヨ qW ミ W よ ${ 
ドメイン 名 を 参照 し た い 


文 。domain | 





衣 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 





プロ パテ ィ 





domain プ ロ パ ティ は ドキ ュ メ ント が 置か れ て いる ドメイン 名 (wwwank.cojp な ど ) を 返 
し ます 。 複数 の 場所 に 同じ ペー ジ を 置く よう な 場合 ドメイン に よっ て リン ク や バナ ー 広 告 を 
変更 する な ど ド メイ ン の 判断 が 必要 な と き に 使用 し ます 。 


(document.domain == "wwwank.cojp"){ 
alert(“ ア ンク の Web サ イト で す "): 


ドメイン 名 が wwwank.cojp の 場合 、「 ア ンク の Web サ イト で す 」 と いう ダイ アロ グ を 表示 し ます 。 








と ょ ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O 〇 〇 O 〇 O ( 遇 〇 


| 参照 ペー ジ の ロケ ーション 情報 を 参照 し た い -・・・・P231 
EE 衝 応 盟 / URI を 参照 / 設 定 し た い ーー P226 


【SAMPLE】 ド メイ ン 情 報 を 取得 する ・・・・・・・ PO067 
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aiNaRd | 


ドキ ュ メ ント の タイ トル を 参照 し た い 


文 .title 


衣 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 








プロ パテ ィ 





ドキ ュ メ ント の タイ トル (HTML/XHTML 文 書 中 <title>ー</title> タ グ で 囲ま れ た 部 分 ) を 
参照 設定 し ます 。 


document.write(" タ イト ル : " + document.title): 
ドキ ュ メ ント の タイ トル を 表示 し ます 。 


goc7777e = document.Hitle: 
ドキ ュ メ ント の タイ トル を 変数 docTitle に 代入 し ます 。 








ヶ ブラ ウザ 対応 表 IE10 1 13:) Fx Chrome Safari Opera iOS6 Android 


(⑳ O O O O O O ) O 
上 参照 2 【SAMPLE】 ドメイン 情報 を 取得 する PO67 
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1 DOCUMENT07 _ = EE 
選択 され て いる 文字 列 を 調べ た い 


$.getRangeAt( 参 照 番号 ) : 





文 .getSelection() 


衣 ……Document オ ブ ジ ェクト また は Window オ ブ ジ ェクト 
Selection オ ブ ジ ェクト 





馬 皇 還 メソッド 





Document オ ブ ジ ェクト の getSelection メ ソ ッ ド は 、 マ ウス な ど で 選 択 さ れ て いる 文字 列 
を 返し ます 。 


HTML5 で は 、Window オ ブ ジ ェクト の getSelection メ ソ ッ ド は 、 文 字 列 で は な く 
Selection オ ブ ジ ェクト を 返し ます 。 一 部 の ブラ ウザ で は 、Document オ ブ ジ ェクト の 
getSelection メ ソ ッ ド も Selection オ ブ ジ ェクト を 返す よう に 変更 され て いま す 。 ブ ラウ ザ で 
の 差異 に 対応 する に は 、window getSelection() を 使用 し ます 。 


Selection オ ブ ジ ェクト は 現在 の 選択 範囲 全体 を 表し 、 個 別 の 選択 範囲 Range オ ブ ジ ェ ク 
ト が 表し ます 。 選択 範囲 が 複数 に 分 断 さ れ て いる と き ( コ ント ロー ルキ ー を 使っ て 選択 し た 場 
合 な ど ) は 、 一 つの Selection に 対し て 、 複 数 の Range が 属す る 形 に な り ま す 。Selection か ら 
Range を 取り 出す に は getRangeAt メ ソ ッ ド を 使用 し ます 。 


getRangeAt( 人 ) 
選択 範囲 内 の 、 指 定 さ れ た 参照 番号 A の Range オ ブ ジ ェクト を 返し ます 。 


また 、 以 下 の メ ソ ッ ド を 使用 する と 、1 つ の 連続 し た 単位 の 選択 範囲 (Range) を 、 全 体 の 選 
択 範囲 (Selection) に 追加 し た り 削除 し た りす る こと が で きま す 。 


addRange( 圏 ) 
指定 の Range オ ブ ジ ェクト 田 を 全体 の 選択 範囲 に 追加 し ます 。 


removeRange( 圏 ) 
指定 の Range オ ブ ジ ェクト 田 を 全体 の 選択 範囲 か ら 削除 し ます 。 
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selectAlIChildren( 人 @) 
指定 され た 要素 氏 の 子 要素 すべ て を 全体 の 選択 範囲 に 追加 し ます 。 


deleteFromDocument() 
現在 の 選択 範囲 全体 を ドキ ュ メ ント か ら 削 除 し ます 。 


Selection オ ブ ジ ェクト や Range オ ブ ジ ェクト が 表す 選択 範囲 の 文字 列 を 取得 する に は 、 オ 
ブ ジ ェクト の toString メ ソ ッ ド を 使用 し ます 。 ま た 、Selection オ ブ ジ ェクト や Range オ ブ ジ 
エク ト に は 文字 単位 で の 選択 範囲 の 開始 位置 と 終了 位置 求め る プロ パテ ィ も 存在 し ます 。 こ 
れ に つい て は サン プル を 参照 くだ さい 。 


var sf = document.qetSelection(): 
選択 され た 文字 列 を 変数 st に 代入 し ます 。 


var se/ec7o7 = window.getSelection (): 
Selection オ ブ ジ ェクト を 取得 し ます 。 


var /g79e = selection.getRangeAt(0): 
] 番目 の 選択 範囲 表す Range オ ブ ジ ェクト を 取得 し ます 。 


selection.removeRange (72796): 
1 番目 の 選択 範囲 の 内 容 を ドキ ュ メ ント か ら 削 除 し ます 。 


ヶ ブラ ウザ 対応 表 IE10 1 1:) Fx Chrome Safari Opera iOS6 Android 
O (⑤ メ O O 〇 O 〇 〇 O 


参照 2 【SAMPLE】 選 択 さ れ て いる 文字 列 を 調べ る ・- PO68 
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クッ キー を 使い た い 


文 。cC0okie 


衣 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 








プロ パテ ィ | 





cookie プ ロ パ ティ は クッ キー の 文字 列 を 参照 設定 し ます 。 プ ロ パ ティ の 値 は クッ キー の 
文字 列 に な り ま す 。 

クッ キー の 文字 列 は 「 キ ー ワ ー ド 1= 値 1: キー ワー ド 2= 値 2: …… 」 と いう 形式 に な っ て いま 
す 。 そ の た め 、 書 き 込む 際 に は 「=」( イ コー ル ) や 「:」( セ ミコ ロン ) を 付加 し 、 逆 に 読み 込む 際 
に は それ ら を 切り 離し て 値 を 取得 する 作業 が 必要 で す 。 また 、「 キ ー ワ ー ド 1= 値 1:]「 キ ー ワ ー 
ド 2= 値 2:]…… の よう に 文字 列 を 順に 設定 する と 、 上 書き で は な く 追 加 が で きま す 。 

クッ キー に は 有効 期限 を 設定 で きま す 。 こ れ に より 、「1 日 間 だ け 有効 な クッ キー」 と いっ た 
設定 も 可能 で す 。 有 効 期限 を 設定 し な い 場 合 は 、 ド キュ メン ト が 閉じ られ る まで 有効 で す 。 有 
効 期限 に 過去 の 日 時 を 指定 する と 、 ク ッ キ ー を 削除 で きま す 。 

た だ し 、 保 存 で きる クッ キー の 数 や サイ ズ に は 限界 が あり 、 そ れ を 超え た 場合 は 古い も の か 
ら 削 除 さ れ て いき ます 。 な お 、 ユ ー ザ ー の ブラ ウザ が クッ キー を 無効 に する よう 設定 され て い 
る 場合 は 、 ク ッ キ ー へ の 書き 込み は 行え ませ ん 。 


document.cookie = "name=ank: Tue, 31-Dec-2014 23:59:59 GMT": 


有効 期限 付き で クッ キー に 書き 込み ます 。 








ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 O 〇 O O O 〇 O 〇 〇 


l 参照 文字 列 を エン コー ドン デコ ー ド し た い P250 
7 日 付 や 時 刻 を 扱い た い ・・ーーーーーー P180 


【SAMPLE】 クッキー を 使う ……・…-……・P070 
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lpe7e8| NIROP) 


アプ レッ ト や プラ グイ ン を 参照 し た い 


ン と 本 ど 洒 慌 一 せ ミ Y 


太 .aDDlets Java ア プレット 数 を 参照 
太 。eImDedS ””。 プラ クイ ン 数 を 参照 
友 .DLUd1S "フラ グイン 数 を 


Eo Es PP 





廊 ……:Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 





プロ パテ ィ | 





ドキ ュ メ ント 内 の java ア プレ ッ ト や プラ グイ ン の オブ ジェ クト の 配列 を 参照 し ます 。 


applets プ ロ パ ティ 
ドキ ュ メ ント 内 の 、<applet> タ グ で 定義 され た java ア プレ ッ ト の リス ト ( 配 列 ) を 参照 し ます 。 


embeds プ ロ パ ティ 
ドキ ュ メ ント 内 の 、<embed> タ グ で 定義 され た プラ グイ ン の リス ト (配列 ) を 参照 し ます 。 


Plugins プ ロ パ ティ 
ドキ ュ メ ント 内 の プラ グイ ン の リス ト ( 配 列 ) を 参照 し ます 。 


alert("」ava ア プレ ッ ト の 数 は " + document.applets.length + "で す 。『): 
ドキ ュ メ ント に 含ま れる アプ レッ ト の 総数 を ダイ アロ グ に 表示 し ます 。 











Column length プ ロ パ ティ に つい て 


length は 配列 の 大 き さ を 取得 する プロ パテ ィ で す 。 以下 の よう に する と 、 ド キュ メン ト 上 の 画 
像 オブ ジェ クト の name 属 性 を 列挙 で きま す (P.30)。 


for(j=0: icdocument.images.length: i++){ 


document.wntte(document.imageshi].name, "<br />): 


} 


ブラ ウザ 対応 表 IE10 1 1 Fx Chrome Safari Opera iOS6 Android 
O 〇 O O 〇 〇 O 〇 〇 〇 O 〇 
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文字 や 画像 を 表示 する | 
| 。 oo 


]avaScript で 文字 や 画像 を 表示 し ます 。 


テマ メ ロキ 





document.open(): 

document.writeln("<pre>"): 

document.writeln("<img src='1images/panda.png' alt=" />"): 
document.writeln("<pre/>"): 

document.write ("avaScript で 表示 され て いま す 。『): 
document.close(): 











G Internet Explorer 


トニ 証 選 測 @ ttp.//wwwwshoeisha.co D - 邑 C | 8 や 画像 を 表示 する 





JavaSscript で 表示 され て いま す 。 








PO57: wrel メ ワン ドー oOEDe ト 2ReI PO058 
- PO05Z 
・ PO058 


| Open メソ ッ ド 
放 用: 参 Close メソ ッ 


write メソ ッ ド ・ 
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lpeie01 ヨ NE ポ 0 り 4 


ドメイン 情報 を 取得 する 





ドメイン 、 最 終 更新 日 の 情報 を 参照 する サン プル で す 。 ド メイ ン を 取得 し 、 タ イト ル バ ー に 
表示 され る タイ トル の 最後 に 付け 足し て いま す 。 最終 更新 日 は 、lastModified プ ロ パ ティ で 
取得 し た 日 付け す ブ ジェ クト か ら getFullYear、getMonth、getDate メ ソ ッ ド で それ ぞ 年 月 
日 を 取得 し 、@@ の @@ 年 @@ 月 @@ 日 の 形式 で 表示 し て いま す 。 





対 
旨 


Var 9g7e = new Date(document.lastModified): // 最 終 更 新 日 を 
Var yeg/ = の 9g7e.getFulLYear(): 

Var 7 の 7 妨 = pg7e.getMonth (): 

Var g7e = pg7e.qetDate(): 

document.title += ":"+ document.domain: // ペ ー ジ の タイ トル に ドメイン 名 を 付け 足す 
document.write(" ド メイ ン 名 :"+ document.domain +"<br />"): 
document.write( "最終 更 新 日 : "+year+ "年 "+7 の 7 妨 +" 月 "+ag7e+" 日 <br />"): 




















document.write( "<a href ビ http:// 代 久代 /myweb/document_domain/' > 移動 </a> "): 









Internet Exp 





と 3 


を 人 tp:/(www hoelsha.co  ・ 中 C | ⑤ ドメイン 情報 取得 する :… 


ドメイン 名 : www.shoeisha.com 
最終 更新 日 :2013 年 4 月 8 日 
移動 













| 参 照 lastModified プロ パテ ィ 
ー- domain プロ パテ ィ 


title プロパティー ーー ドー ドー 1 
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選択 され て いる 文字 列 を 
調べ る 


マウ ス で 選択 され た 文字 列 を フォ ー ム の 入力 欄 に 書き 出す サン プル で す 。 onmouseup イ ベ 
ント を 利用 し 、 マ ウス ボタ ン が 離さ れる た びに 選択 文字 列 を 取得 し ます 。 


HTML5 版 API が 利用 で きる 場合 は 、Selection オ ブ ジ ェクト を 利用 し て 、 ど の 要素 の 何 文字 
目 か ら ど の 要素 の 何 文字 目 ま で 選択 範囲 が 存在 する か を 表示 し ます 。Range オ ブ ジ ェクト を 
使う 場合 は 、startContainer が 開始 要素 、startOffset が 開始 位置 、endContainar が 終了 要 
素 、endOffset が 終了 位置 に な る ほか は 、 サ ンプ ル と 同様 で す 。 





// 選 択 し た 文字 列 を テキ スト ポッ クス に 表示 させ る 関数 
function se/ec5 な か () { 
var 7exfE/e/7 = document.getElementById("text1"): 
if (window.qetSelection) { 
// HTML5 API 


Var se/ = window.getSelection(): // Selection オ フジ ェ ク | 

Var s が 7 = "「" + se/.anchorNode.nodeValue + "」 の ": // 選択 の 起点 要素 
s な ケ += se/.anchorOffset + "文字 目 か ら ": // 要素 内 の 開始 位置 

s ケ +="「" + se/.focusNode.nodeValue + "」 の ": // 選択 の 終点 要素 
s ケ += se/.focusOffset + "文字 目 ま で ": // 要素 内 の 終了 位置 
document.getElementById( "info").innerHTML = s: 











ex7E/e/7.Value = seLtoString(): // 選択 文字 列 は toString0 で 取り 出す 
} else if (document.getSelection) { 
API 
ex7/e77.Value = document.getSelection (): 
} else { 
非 対 応 ブ ラウ ザ 
7ex7E/e/7.Value = "参照 不可 ": 
} 





ir 王 議 議 議 証 証 昌 0--- っ? 


<body onmouseup="selectStr()"> 
<D テ > 
<Span id="part1"> 選 択 され て いる </span><span 1d="part2"> 文 字 列 を </span><span 
1d="part3 "> 取得 し た い </span> 
</D> 
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<form> 
<P> 選 択 文字 列 : <1nput type="text" id="text1" /></D> 


<D id="info"></D> 
</form> 
</bodV> 


@| 


Internet Exp 

















と 
選択 され 訪 三 記 文 字 列 を 取得 し た い 
選択 文字 列 :| て いる 

「 選 択 さ れ て いる 」 の 4 文字 目 


旨 違 択 され て いる 文字 列 .… 

















か ら 「 選 択 さ れ て いる 」 の 7 及 字 目 ま で 





し Cs ore 開始 要素 、 開 始 位置 、 終 了 要 素 、 終 了 位 置 が 表示 され 








Internet Exp 









@S・ 


間 お 気に入り 





IEEE3llbE 四 
叶 知れ て る 文字 本 -| | 和仁 ・ 回 





















選択 され て いる 文字 列 を 取得 し た い 
選択 文字 列 :| 多 照 下 可 。 








len ソ ッ ド 非 対 応 の ブラ ウザ で は 「 参照 不可 」 と 表示 され ます 。 


| gelSeleclon メソ ツ ド jcas2c<c。・re es PO062 
中 参上 2 
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初回 訪問 時 に 名 前 が 入力 され て いる と 、 次 回 以降 は 「 よ うこ そ ( 名 前 ) さ ん ! 」 と 表示 する サン 
ブル で す 。 ま ず 、 ペ ー ジ が 読み 込ま れる と 、loadPage 関 数 が 呼び 出さ れ ま す 。getCookie 関 
数 で NAME と いう キー で 値 が ある か な いか を 調べ ます 。 な か っ た 場合 (初回 訪問 時 ) は 名 前 の 
入力 を 促す テキ スト 入力 フィ ー ル ド を 表示 し ます 。[OK] ボ タン が クリ ッ ク さ れる と 、 入 力 さ 
れ た 名 前 を setCookie 関 数 で NAME と いう キー で クッ キー に セッ ト し ます 。 2 回 目 以降 の 訪問 
で は クッ キー か ら 取 得 し た 値 を 使っ て 「 よ うこ そ ( 名 前 ) さ ん ! 」 と 表示 し ます 。 表示 の 振り 分 け 
は innerHTML を 使用 し 、HTML 文 書 内 の <div id="div> タ グ 内 の HTML を 書き 換え る こと で 
実現 し ます 。 

以下 、setCookie 関 数 、getCookie 関 数 に つい て 解説 し ます 。 


@setCookie 関 数 
クッ キー に 値 を 書き 込む 関数 で す 。 
① function seCoo ん 7e (ん ey7a/7e, Mg/){ 
@ Var 77p = ん ey7a77e + "=" ォ escape(Mg/) + "の 
⑧ 婦 の += "expires = Mon,31-Dec-2015 23:59:59:": 
④ document.cookie = 7 の: 
@} 


① 引 数 と し て keyname、val を 受け 取り ます 。keyname は クッ キー に 保存 する キー 名 、val は 
保存 する 値 で す 。 

② ず 変数 tmp に 「keyname = (文字 コー ド に 変換 し た )val」 を 代入 し ます 。 

※ ク ッ キ ー に は 日 本 語 を その まま 保存 で き な い た め 、escape メ ソ ッ ド を 使っ て 文字 コー ド に 
変換 する 必要 が あり ます 。 

③ 変 数 tmp に 「expires = Mon.31-Dec-2015 23:59:59:」 を 付け 足し ます 。 そ の 結果 、 変 
数 tmp に は 「keyname = (文字 コー ド に 変換 し た )vaexpires = Mon.31-Dec-2015 
23:59:59:」 が 代入 され て いま す 。 

※exDires は クッ キー の 有効 期限 を 指定 し ます 。 省 略し た 場合 の 有効 期限 は ブラ ウザ 終了 時 と 
な り ま す 。 

④ ク ッ キ ー に 変数 tmp の 内 容 を 保存 し ます 。 


@getCookie 関 数 
クッ キー か ら 値 を 取り 出す 関数 で す 。 
① function 9e7Coo ん 7e (ん ey7a77e){ 
@ Var 7 = document.cookie + "の 2: 
⑧ Var 7ex7 = 77p.index0f( ん ey7a77e, 0): 
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【O) ( カ ex7 != -1){ 

⑤ 7 = 7 の .Substring(7ex7, 7p.length): 

⑮⑤ 加 gex2 = 7p.index0f("=", 0): 

⑦ 加 9ex3 = 7 の .indexOf( "2", 7 の ex2 ): 

(GO return unescape(7 が 77p.Substring(77ex2 + 1, 77ex う ) ) 
の 9 ! 

⑩ return "の 

⑳} 


① 引 数 と し て keyname を 受け 取り ます 。 こ れ は クッ キー か ら 値 を 取り 出す と き の キ ー 名 と な 
り ま す 。 

クッキ ー の 値 に 「:」( セ ミコ ロン ) を 付加 し た も の を 変数 tmp に 代入 し ます 。 

※ ク ッ キ ー の 値 が 取得 で きた 場合 、 日 本 語 な ど は 文字 コー ド と な っ て いる た め 変 数 tmp の 中 身 
は NAME = %u7FD4%u6CF3%u793E: の よう に な っ て いま す 。 

③ 変 数 tmp を indexOf メ ソ ッ ド で 検索 し ます 。 変 数 tmp に 代入 され て いる 文字 列 中 に 引数 で 
渡さ れ た キー 名 (keyname) が あっ た 場合 、 変 数 ijndex1 に は 最初 に 一 致し た 位置 (0 こ ) が 代 
入 さ れ ま す 。 な か っ た 場合 は -1 が 代入 され ます 。 

④index1 の 値 が -1 以 外 の と き ⑤~⑧ の 処理 を 行い ます 。 

⑤ 変 数 tmp か ら キ ー 名 以降 の 文字 列 を 抜き 出し て tmp に 代入 し 直し ます 。 
この 処理 は キー 名 に 「=」( イ コー ル ) が 使用 され て いる と き に 、⑥ で 行う 処理 が お か し く な る 
の を 防ぐ た めで す 。 この サン プル で は あり えま せん が 、 訪 の た めこ の 処理 を 行っ て いま す 。 

⑥⑤ で 代入 し 直し た 変数 tmp の 「=」( イ コー ル ) の 位置 を 検索 し 、index2 に 代入 し ます 。 

⑦⑥ と 同じ よう に 「:」( セ ミコ ロン ) の 位置 を 検索 し 、index3 に 代入 し ます 。 

⑧⑥ と の ⑦ で 取得 し た 値 を 使用 する こと で 必要 な 部 分 だ け と 取り 出す こと が で きま す 。 取り 出 
し た 値 が 文字 づ ゴー ド で ある と きのこ と を 考え unescape メ ソ ッ ド で 文字 列 に 変換 し 、 関 数 の 
呼び 出し 元 に この 値 を 返し て 処理 を 終了 し ます 。 

⑩④ で index1 の 値 が -1 だ っ た 場合 、 空 文字 を 返し ます 。 


Var 7765: 
Var 7E/e/7: 


// ペ ー ジ 読み 込み 時 の 処理 の 関数 

function /oag7gge り { 
7g77e5 = detCookie("NAME"): // ク ウッキー か ら 名 前 を 取得 し て 変数 names に 代入 
の 7vE/e/7 = document.getElementById("div"): 


if(7a776s == ""){ // ク ッ キ ー か ら 取 得 で き な か っ た 場合 
の 7//e/7.1innerHTML = "<p> お 名 前 は ? <input type= デ text id デ name ソ ></p>"+ 
" く p> く input type デ button'value デ OK' onclick=clickOK07></p>"* 
}elset // 取 得 で きた 場合 
の 7rE/e/7.1innerHTML = "<b> よ うこ そ " + ages + "さん 1 マ </b>"* 





} 
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} 


//OK ボ タン が クリ ッ ク さ れ た と き 呼 び 出 され る 関数 

function c/7c0(){ 
setCookie("NAME", document.getElementById( "name").value): 
loadPage(): 


// ク ッ キ ー か ら 値 を 読み 込む 関数 
function 9e7Coo ん 7e (ん ey77g/7e){ 
var 7 = document.cookie + "ジジ 
Var 77 の ex7 = 77p.index0f( ん ey77g/7e, 0): 


if( カ gex7 != -1){ 
7 = の の .Substring(7 の ex7, 777p.length): 
Var 77ex2 = 77p.index0f("=", 0): 
Var 77ex3 = 7 の .index0f( "2", 7 の ex2): 
return unescape(7 が 7p.substring(7 の ex2 + 1, 77ex3?) ) 


} 


return "の 


// ク ッ キ ー に 値 を 書き 込む 関数 

function seCoo ん 7e( ん ey7a77e, Mg/){ 
Var 777P = ey7g77e + "="+ ォ escape(Mg/) + の: 
7 の += "expires = Mon,31-Dec-2015 23:59:59:": 
document.cookie = 77/: 


} 











<body onload="loadPage() "> 
<div id="div"> 

</div> 

</body> 
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を 3 


PE 


2 









お 名 前 は ? 閣 泳 太郎 


Lek」 











⑲ 初 回 アク セス 時 は 名 前 を た ず ね ます 


し 3 


< Fmr" テ PFTFEYYEY5 間 


よう こそ 翔 泳 太郎 さん ! 





@ 名 前 を 入力 する と 、 メ ッ セ ー ジ が 表示 され ます 。 2 回 目 以降 の アク セス で も 、 同 様 の メッ セー 
ジ が 表示 され ます 


Column クッ キー と は 何 か ? 
クッ キー と は ユー ザー 情報 や アク セス 履歴 な どの 情報 を Web サ ー バ ー と Web ブ ラウ ザ で や り 取 
りす る た め の 仕 組み 、 も し く は その 情報 が 格納 され て いる デー タフ ァイル の こと で す 。 サー バー か 
ら ブ ラウ ザ に 送ら れ た 情報 は 、 テ キス ト 形 式 で ユー ザー の コン ピュ ー タ に 一 時 的 に 保存 され 、 次 回 
の 交信 時 に 送り 返さ れ ま す 。 

クッ キー に は ブラ ウザ の 種類 、 最 後に サイ ト を 訪れ た 日 時 、 そ の サイ ト へ の 訪問 回 数 、ID や パ 
スワ ー ド な ど さ ま ざま な 情報 を 書き 込む こと が で きま す 。 目的 は ユー ザー の 識別 で 、 そ の 一 例 と し 


て ユー ザー 認証 の 簡素 化 、 ア クセ ス 履 歴 や 商品 の 購入 履歴 の 把握 等 に 利用 され て いま す 。Web サ 
イト に アク セス し た 際 、 入 力 欄 に 前 回 使用 し た ユー ザー 名 が 記録 され て 次 回 の 入力 が 省略 で きた り 
する の は 、 こ の 機能 を 利用 し て いる か ら な の で す 。 ま た 、 ク ッ キ ー に は 有効 期限 を 設定 で き 、 有 効 
期限 を 過ぎ た も の は 消滅 し ます 。 

そもそも クッ キー は Netscape Communications 社 が 開発 し 、Netscape Persistent Cookies 
と し て 同社 の ブラ ウザ に 組み 込ん だ の が 始ま り で す 。 標準 化 団体 に よっ て 正式 に 規格 化 さ れ た も の 
で は あり ませ ん が 、 多 く の ブ ラウ ザ が 対応 し て いる た め 事 実 上 の 世界 標準 に な つて いま す 。 


cookie プロ パテ ィ ー ドー ドド ーー PO64 
ビ 色 
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[テツ メロ サテ] 











新しい ウィ ンド ウ を 開き た い 


太 = マ .open( 多 , ^, @) 





… 新 し い ウ ィ ン ドウ の オブ ジェ クト 
ヤ … 親 Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 】 


人 新しい ウィ ンド ウ の 名 前 【 省 略 可 】 
@…… オ ブ プション 値 【 省 略 可 】 





メソ ッ ド 





新しい ウィ ンド ウ を 開く メソ ッ ド で す 。 タ ブ ブ ラ ウザ の 場合 は 新しい ウィ ンド ウ で は な く 、 
新しい タブ を 開く 場合 も あり ます 。 新しい ウィ ンド ウ に 表示 する HTML/XHTML フ ァイル の 
URI は 金 で 指定 し ます 。 絶 対 URI と 相対 URI いずれ の 形 で も 指定 可能 で す 。URI を 指定 し な い 場 
合 は 空白 の 状態 で ウィ ンド ウ が 開き ます 。 

^ ム は ウィ ンド ウ の 名 前 で す 。 既 に 開い て いる ウィ ンド ウ や フレ ー ム の 名 前 を 指定 すれ ば 、 指 
定 し た 名 前 を 持つ ウィ ンド ウ に 新しい ペー ジ を 表示 する こと も 可能 で す 。 

新しく 開く ウィ ンド ウ の サイ ズ 、 ツ ー ル バー や ステ ー タ スバ パー の 表示 の 有無 な ど は 、 オ プシ 
ョ ン 値 ( 借 ) と し て 設定 し ます 。 オ プシ ョ ン 値 の 並び 順 は 問い ませ ん 。 そ れ ぞ れ を 「,」( カ ンマ ) 
で 区 切り 、 全 体 を 「" "(ダブ ルク オー テー ショ ン ) で くく っ て 指定 し ます 。 ブ ラウ ザ に よっ て は 
オプ ショ ン の 初期 値 が 異な る 場合 が あり ます の で 、 設定 が 必要 な と き は 記述 し て お いた 方 が よ 
いで し ょ う 。 ま た 、 ブ ラウ ザ や バー ジョ ン に よっ て は 有効 に な ら な い オ プシ ョ ン が ある の 
で 注意 が 必要 で す 。 な お 、 オ プシ ョ ン 値 は 以下 の 通り で す 。 


Open メソッド の オプ ショ ン 値 | 設定 値 1 動作 
「 directories : Yes/no ま た は 170 ディ レク トリ バー 表示 / 非 表示 1 
935 科 EE :yesno ま た 170 er 


1 imenubar 。 yes/no ま た は 1/0 
SR 
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て 半 


window.open("", "new", "width=480,height=360,status=1,menubar=1"): 


ー 
に の 


ステ ー タ スバ パー と メニ ュー バー の み が 表 示さ れ た 幅 480 ピク セル 、 高 さ 360 ピク セル の new と 
いう 名 前 の 空白 の ウィ ンド ウ を 開き ます 。 








Column Window オ ブ ジェ クト 

Window オ ブ ジ ェクト は javaScript の オブ ジェ クト 階層 の 最上 位 に 位置 する オブ ジェ クト で 、 
Web ブ ラウ ザ の ウィ ンド ウ に 関す る 情報 を 扱い ます 。 新 し い ウ ィ ン ド ウ を 開い た り 、 表 示 中 の ウ 
ィ ン ド ウ の 情報 を 取得 し た り 、 ウ ィ ン ド ウ の サイ ズ や 位置 な ど を 変更 可能 で す 。 








了 ウ 
イ 
の 
ド 
ウ 
を 
開 
き 
い 





ぁ p ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 〇 〇 O O O O O O 
l 参照 ウィ ンド ウ を 閉じ た い ぃ ーーー ドー PO076 【SAMPLE】 別 の ウィ ンド ウ を 操作 する ・・…・・ PO85 
ジジ 和 活 軸 ) 的 の ウィ ンド ウ を 操作 し た い ・…ーーーーー P077 
ウィ ンド ウ の 位置 を 指定 し た い P078 
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| WINDOW02 =  … 2 
ウィ ンド ウ を 閉じ た い 


文 .close() 





廊 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 】 





メソ ッ ド 





ウィ ンド ウ を 閉じ る に は 、close メ ソ ッ ド を 使用 し ます 。 文 に 指定 し た ウィ ンド ウ を 閉じ 、 
ウィ ンド ウ 名 を 省略 し た 場合 は 自分 自身 の ウィ ンド ウ を 閉じ ます 。 


7ew 巡 如 .close (): 
ウィ ンド ウ newWin を 閉じ ます 。 











ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
⑳ O 〇 O 〇 O O 〇 O O O 〇 
| 参照 新しい ウィ ンド ウ を 開き た い ・・・・・・・・・・-・P074 【SAMPLE】 別 の ウィ ンド ウ を 操作 する ・・・・・・ P085 
人 別 の ウィ ンド ウ を 操作 し た い ・ーーーー P077 
ウィ ンド ウ の 位置 を 指定 し た い 2 P078 
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| WINDOW03 = = = 2 証 還 還 EE 
別 の ウィ ンド ウ を 操作 し た い 


文 。.ODener オー プン 元 の ウィ ンド ウ を 参照 
文 。closed ウィ ンド ウ が 閉じ て いる か を 参照 


文 。naime ウィ ンド ウ 名 を 参照 設定 


友 …… 親 WindOow オ ブ ジ ェクト (ウィ ンド ウ 名 ) 








プロ パテ ィ 





親 ウ ィ ン ド ウ と サブ ウィ ンド ウ と の 間 で 相手 の ウィ ンド ウ を 参照 する に は opener、closed 
プロ パテ ィ を 使用 し ます 。 
opener プ ロ パ ティ 

太 に ウィ ンド ウ 名 を 指定 し た 場合 は 指定 し た ウィ ンド ウ を 開い た 親 ウ ィ ン ド ウ 、 ウ ィ ン ド ウ 
名 を 省略 し た 場合 は 自分 自身 の ウィ ンド ウ を 開い た 親 ウ ィ ン ド ウ を 参照 し ます 。 
closed プ ロ パ ティ 

指定 し た ウィ ンド ウ が 閉じ て いる か どう か を 参照 し ます 。 閉 じ て い る 場合 は true、 閉 じ て 
いな い 場 合 は false を 返し ます 。 開い た ウィ ンド ウ が ユー ザー に よっ て 閉じ られ て し まっ た か 
どう か を 調べ る こと が で きま す 。 
name プ ロ パ ティ 

ウィ ンド ウ 文 の 名 前 を 参照 / 設 定 し ます 。 


pa/e777oc = window.opener.location: 
親 ウ ィ ン ド ウ の リン ク 先 を 変数 parentLoc に 代入 し ます 。 
補 (7ewMW77.closed) 


alert(" 閉 じ て い ます "): 
ウィ ンド ウ newWin が 閉じ て いた 場合 、「 閉 じ て い ます 」 と いう ダイ アロ グ を 表示 し ます 。 
wa/7e = 7e 如 name: 
ウィ ンド ウ newWin の 名 前 を 変数 WName に 代入 し ます 。 











p ブラ ウザ 対応 表 IE10 1) 13: Fx Chrome Safari Opera iOS6 Android 
O O 〇 (⑯ O O O (@⑳) 〇 
3 | 新しい ウィ ンド ウ を 開き た たい PO074 【SAMPLE】 別 の ウィ ンド ウ を 操作 する ・・・・ PO085 
用 所 遇 ウイ ンド ウ を 閉じ た い …ー ド ーー ドー P076 
ウィ ンド ウ の 位置 を 指定 し た い ーー P078 
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MAINlpie)/A0L! 


ワウ ィ ン ド ウ の 位置 を 指定 し た い 


文 .moveTo( 多 , 〇 ) ウィ ンド ウ 人 中 を 設定 | 
文 .mOVeBV( 全 , へ ) 。。 ウィ ンド の ウ 位 置 を 相 汐 に 変更 | 
| 








衣 …… Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) の 〇 …… 左上 端 の Y 座 標 | 

[省略 可 】 ム ……X 方 向 の 変更 量 | 
例 左上 端 の X 座 標 へ …… Y 方 向 の 変更 量 | 
メソ ッ ド | 


ウィ ンド ウ を 移動 させ る メソ ッ ド で す 。 座標 や 変更 時 は ピク セル 単位 で 指定 し ます 。 多く の 
最新 の ブラ ウザ で は 、 avaScript で 開い た わけ で は な い ウ ィ ン ド ウ や 、 複 数 の タブ を 持つ ウィ 
ンド ウ で は 無視 され ます 。 


moveTo メ ソ ッ ド 
( 多 , 〇 ) で 指定 し た モニ タ 上 の 座標 位置 に ウィ ンド ウ を 移動 させ ます 。 


moveBy メ ソ ッ ド 
現在 の 位置 か ら (4, へ ) で 指定 し た 分 だ け ウ ィ ン ド ウ を 移動 させ ます 。 マ イナ ス の 値 を 指定 
し て 、 逆 方 向 に 移動 させ る こと も 可能 で す 。 


s/ み 77.moveTo(100, 50): 
ウィ ンド ウ subWin を モニ タ 上 の 座標 (100, 50) に 移動 させ ます 。 


window.moveBy(20, 10): 
現在 の ウィ ンド ウ を X 方 向 に 20、Y 方 向 に 10 ピ ビク セル 移 動 させ ます 。 











ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 O 9 O 〇 〇 O 〇 O 〇 
| 参照 新しい ウィ ンド ウ を 開き た い ーーーーーー・ P074 ウィ ンド ウ の サイ ズ を 調べ た い ・…・・・・…・ PO80 
ジテ ウィ ンド ウ を 閉じ た い ……ーーーーーーー PO076 モニ タ の 有効 領域 を 参照 し た い PO98 
別 の ウィ ンド ウ を 操作 し た い ・ーーーーー PO077 【SAMPLE] ウィ ンド ウ の 位置 と サイ ズ を 指定 する ・・ P089 
ウィ ンド ウ の サイ ズ を 変更 し た い ・…・・・・--・- P079 
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| WINOOW05。。。。。 5 還 還 還 還 還 還 還 還 
ウィ ンド ウ の サイ ズ を 変更 し た い 


.resizeTo ( 多 , 〇 ) ウィ ンド ウサ イズ を 変更 
文 .resizeBV(^, へ ) ウィ ンド ウサ イズ を 相対 的 に 変更 


大 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 】 








全幅 (ピク セル ) 

の 202 高 さ (ビク セル ) 
人 る ……X 方 向 の 変更 量 
へ ……" ツ 方 向 の 変更 量 





馬 主 』 メソッド 





ウィ ンド ウ の 大 き さ を 指定 し た サイ ズ に 変更 する メソ ッ ド で す 。 サ イズ や 変更 量 は ピク セル 
単位 で 指定 し ます 。 ウィンド ウ の サイ ズ は ブラ ウザ の 種類 に よっ て 各種 バー や ウィ ンド ウ の 枠 
を 含む / 含 まな いと いっ た 違い が あり ます 。 な お 、 多 く の 最 新 の ブラ ウザ で は 、 avaScript で 
開い た わけ で は な い ウ ィ ン ド ウ や 、 複 数 の タブ を 持つ ウィ ンド ウ で は 無視 され ます 。 


resizeTo メ ソ ッ ド 
ウィ ンド ウ の サイ ズ を ( 移 , ) で 指定 し た 幅 と 高 さ に 変更 し ます 。 


resizeBy メ ソ ッ ド 
現在 の ウィ ンド ウ の サイ ズ に (4, へ ) で 指定 し た 幅 と 高 さ を 追加 し 、 サ イズ 変更 し ます 。 マ 
イナ ス の 値 を 指定 すれ ば 、 ウ ィ ン ド ウ の サイ ズ を 小さ く で きま す 。 


sg の 叱 .resizeTo (400, 400): 
ウィ ンド ウ subWin を 幅 400、 高 さ 400 ピ クセ ル に サイ ズ 変 更 し ます 。 


window.resizeBy(50, 100): 
現在 の ウィ ンド ウ の サイ ズ に 幅 50、 高 さ 100 ピ クセ ル を 追加 し 、 サ イズ 変更 し ます 。 











ょ ブラ ウザ 対応 表 IE10 1 3) Fx Chrome Safari Opera iOS6 Android 
【 〇 O O O X 〇 に メ メ 
| 参 照 ウィ ンド ウ の 位置 を 指定 し た い P078 【SAMPLE】 ウィ ンド ウ の 位置 と サイ ズ を 指定 する ・・ P089 
ロロ ウィ ンド ウ の サイ ズ を 調べ た い P080 
モニ タ の 有効 領域 を 参照 し た い ・・…・・・・・・ P098 
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MAINlpXe)/Ao 


ウィ ンド ウ の サイ ズ を 調べ た い 





文 。innerWidth ウィ ンド ウ の 内 側 の 幅 を 参照 / 設 定 
文 .innerHeiqht ウィ ンド ウ の 内 側 の 高 さ を 参照 / 設 定 
文 。0uterWidth ウィ ンド ウ の 外側 の 幅 を 参照 / 設 定 


文 .0uterHeiqht ウィ ンド ウ の 外側 の 高 さ を 参照 ノ 設定 





胡 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 】 





プロ パテ ィ 





指定 し た ウィ ンド ウ の 幅 や 高 さ を 参照 / 設 定 する プロ パテ ィ で す 。 サ イズ や 変更 量 は ピク セ 
ル 単 位 で 指定 し ます 。 こ れ ら の プロ パテ ィ の 働き は 、resizeTo や resizeBy メ ソ ッ ド に 似 て い 
ます が 、 値 を 参照 で きる 点 が 異な り ま す 。 た だ し 、 IE8 ま で の Internet Explorer は 未 対応 で す 。 
innerWidth、innerHeight プ ロバ ティ 

ウィ ンド ウ の 内 側 (表示 領域 ) の 幅 や 高 さ を 参照 / 設 定 し ます 。 
outerWidth、outerHeight プ ロ パ ティ 

ウィ ンド ウ の 人 外側 (ウィ ンド ウ 全 体 ) の 高 さ や 幅 を 参照 / 設 定 し ます 。 


7 = innerWidth: 

変数 iw に 現在 の ウィ ンド ウ の 内 側 の 幅 を 代入 し ます 。 
廊 = innerHeiqht: 

変数 ih に 現在 の ウィ ンド ウ の 内 側 の 高 さ を 代 入 し ます 。 


document.write("<em> ウ ィ ン ド ウ の 外側 の 幅 :"+ outerWidth + "</em>"): 
ウィ ンド ウ の 外側 の 幅 を 表示 し ます 。 


outerHeight = 480: 
ウィ ンド ウ の 外側 の 高 さ を 480 ピ クセ ル に 設定 し ます 。 








1 アルル ルル: 中 - 提 較 | コ リリ IE9 3:) Fx Chrome Safari Opera iOS6 Android 
O O メ 〇 O 〇 O O O 

呈 左 参 ウィ ンド ウ の 位置 を 指定 し た い ・-・・・…・ P078 モニ タ の 表示 サイ ズ を 参照 し た い …・・・・・・ P100 

| ロ ウィ ンド ウ の サイ ズ を 変更 し た い ・・・・・・・・・ PO079 サイ ズ 変 更 時 に 処理 を 行い た い ・・・・・・・・ P131 

モニ タ の 有効 領域 を 参照 し た い ・-・・・・・・・・ P098 【SAMPLE】 ウィ ンド ウ の 位置 と サイ ズ を 指定 する ・・ P089 
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| WNDOW07 ” 225ss 還 の 
6 
3 ド 
ペー ジ を スク ロー ル さ せ た い ウ 
回 還 
娘 .ScrolL( 多 , の ) 指定 位置 に スク ロー ル す る を 
娘 .SCrollTo ( 人, べ ) 。 拓 置 に スク ロー ル す る 軸 
友 .SCrOlLLBV( 人 る, へ) 地位 置 に スク ロー ル す る た 
天 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 )  ^……X 方 向 の 移動 量 (ピクセル) 
[中 可 方向 の 移 重量 (ビク セル ) 
る …X 標 
中 Y 座 標 
メソ ッ ド 





ペー ジ の 内 容 を スク ロー ル さ せる メソ ッ ド で す 。 座標 や 変更 量 は ピク セル 単位 で 指定 し ます 。 
scroll、scrollTo メ ソ ッ ド 

( 多 , 〇 ) で 指定 し た 座標 位置 に スク ロー ル し 、 ペ ー ジ の 内 容 を 表示 し ます 。 
scrolIBy メ ソ ッ ド 

現在 の 表示 開始 位置 か ら (4, へ ) で 指定 し た 分 だ け 開 始 位置 を 移動 させ ます 。 マ イナ ス の 値 
を 指定 し て 、 逆 方 向 に 移動 させ る こと も 可能 で す 。 た だ し 、 ペ ー ジ の サイ ズ を 超え る 値 を 指定 
し た 場合 は 無効 に な る の で 、 ス クロ ー ル バー で 移動 で きる 範囲 内 を 指定 し な けれ ば な り ま せん 。 
な お 、 ペ ー ジ の サイ ズ を 調べ る に は innerWidth と innerHeight プ ロ パ ティ を 利用 し ます 。 


2 
を 
ス 
ク 
W 
ル 
さき 
せ 
た 


一 
ン 


scroll(x, V): 
変数 xX、y の 値 の 位置 に スク ロー ル さ せま す 。 


7ew 廊 77.scrollTo(50, 100): 
ウィ ンド ウ newWin を 座標 (50.100) に スク ロー ル さ せま す 。 
7ew 凡 7.scrolLBy(50, 100): 
ウィ ンド ウ newWin を X 方 向 に 50 ピ クセ ル 、Y 方 向 に 100 ピ クセ ルス クロ ー ル させ ます 。 








p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 〇 〇 〇 〇 〇 〇 〇 


3 照 ドキ ュ メ ント の 上端 か ら の 位置 を 参照 設定 し た い ・・・ PO082 
ヒビ 息 
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MAINIK@ の AI | 


ドキ ュ メ ント の 端 か ら の 位置 を 参照 / 
設定 し た い 


| 
文 .DadeXOffset 横 方 向 の オフ セッ ト を 参照 設定 
文 .DadeYOffset 獅 方 向 の オフ セッ ト を 参照 設定 | 





娘 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 





プロ パテ ィ 





pageXOffset、pageYOffset プ ロ パ ティ は それ ぞ れ X 方 向 、Y 方 向 の オフ セッ ト 、 つ まり 現 
在 の 表示 開始 位置 を 参照 設定 し ます 。 こ れ ら の プロ パテ イィ を 使用 すれ ば 、 ス クロ ー ル され て 
いる 位置 を 調べ る こと が で きま す 。 


7eWw/77.pageXOffset = 250: 
ウィ ンド ウ newWin の X 方 向 の オフ セッ ト を 250 ピ クセ ル に 設定 する 。 


Y の = 7ewM ル 77.pageYOffset: 
ウィ ンド ウ newWin の Y 方 向 の オフ セッ ト を 変数 yo に 代入 する 。 





ょ ブラ ウザ 対応 表 IE10 1 1 Fx Chrome Safari Opera iOS6 Android 
O O O 〇 O 《⑤) O O 〇 〇 


ペー ジ を スク ロー ル さ せ た い ・… -PO81 
中 参照 2 





082 | WINDOW08 





MINIpI@ IA に ) ド 
ブラ ウザ の ボタ ン と 同様 の 本 
処理 を し た い | 国 
文 .Dack() 1 つ 前 の ペー ジ に 戻る | 有る 
娘 .forWard ( ) つの ペー ジ に 人 | の 
1 ホー ムペ ー ジ に 移動 上 
文 .Drint( 印刷 する 





文 .StoD ( ) 読み 込み を 中 上 
論 .find( 多 ) # 兵 し た 文字 を 検索 





……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) [省略 可 ) 





メソ ッ ド 





ブラ ウザ の ツー ル バ ー に ある ボタ ン と 同じ 働き を する メソ ッ ド で す 。 back、forward メ ソ 
ッ ド は それ ぞ れ 対象 と な る 履歴 が な い 場 合 は 何 も 起こ り ま せん 。print メ ソ ッ ド で は 一 般 的 に 
は 印刷 ダイ アロ グ を 開き ます 。 


画 全 S 落 本 frrV 六 革 S 寺 MININ ど と 計 て 人 同 剖 NN 














window.back(): 1 つ 前 の ペー ジ に 戻り ます 。 

window.forward(): 1 つ 先 の ペー ジ に 進み ます 。 

opener.home(): 親 ウ ィ ン ド ウ に ホー ムペ ー ジ を 表示 し ます 。 に 

7y7g9e.Drint(): ウィ ンド ウ myPage を 印刷 し ます 。 

onClick="window.stop() " クリック し た ら 読 み 込 み を 中 止 し ます 。 

find(" プ ロ パ ティ "): ドキ ュ メ ント 内 か ら 「 プ ロ パ ティ 」 と いう 文字 列 を 検索 し て そ た 

の 部 分 を ブラ ウザ に 表示 し ます 。 い 

p ブラ ウザ 対応 表 IE10 1 13:) Fx Chrome Safari Opera iOS6 Android 

print 〇 O O O O O O O メ X 

find x  x X%。 6 区 x Xx x x ウ | 

その 他 メ X メ O メ メ O メ メ 2 
履歴 の 前 後に 移動 し た い ・・ーーーーー… P240 ド 

上 参照 】 必 有 の 数 を 調べ た い 0 沙 Sp P239 ウ 
【5AMPLE】 ブ ラウ ザ の ボタ ン と 動揺 の 処理 を し た い ・・ P083 と 
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| 





記 代 boyA 議 議 議 議 議 詳 語 昌 。 0〔〈〔 ツ  〔〕 
イン ライ ン フ レー ム を 参照 し た い 


文 。CO0ItentDOCUlleIt イン ライ ン フ レー ム 内 の Document オ ブ ジ ェクト (読取 専 用 ) 
文 。COItentW1ndOW パイ ン ライ ン フレ ー ム 内 の Window オ ブ ジ ェクト (読了 専用 ) 


文 。SIC イン ライ ン フ レー ム 内 に 表示 する 内 容 の URL 
文 。SrCdoc イン ライ ン フ レー ム 内 に 表示 する 内 容 の HTML コ ー ド 
文 。sandbox イン ライ ン フ レー ム の サン ド ボ ッ クス 指定 (読取 専 用 ) 


念 .frames [参照 番号 ] フレ ー ム も し く は イン ライ ン フ レー ム を 格納 し た 配列 


娘 ……IFrame オ ブ ジ ェクト (イン ライ ン フ レー ム 名 ) 
全 …:WindOow オ ブ ジ ェクト (ウィ ンド ウ 名 ) 








プロ パテ ィ 





HTML5 で は アク セ シ ビ ピリ ティ の 問題 か ら フ レー ム は 廃止 と な り 、 代 わり に イン ライ ン フ レ 
ー ム (iframe 要 素 ) が 標準 に 昇格 し まし た 。 イ ン ラ イン フレ ー ム を 使う と 、 ド キュ メン ト 内 に 
別 の ドキ ュ メ ント を 埋め 込む こと が で きま す 。 


sandbox プ ロ パ ティ が 存在 する 場合 、 埋 め 込ま れ た 側 の ドキ ュ メ ント は 「 サ ンド ボッ クス 
(砂場 ) 化 ] さ れ て お り 、 埋 め 込 ん で いる 親 側 へ の アク セス 、 ウ ィ ン ド ウ 操 作 、 ス クリ プ ト の 実 
行 、 デ ー タ の 送信 な どの 危険 な 操作 が 行え ませ ん ( 空 文字 が 指定 され て いる 場合 )。 空 文字 以外 
の キー ワー ド が 指定 され て いる 場合 は 、 指 定 に 基づい て 制限 が 緩和 され ます (サン プル 参照)。 


Var 如 s77eMW 妨 = 妨 a/7e.contentWindow: 
イン ライ ン フ レー ム iframe 内 の Window オ ブ ジ ェクト を 取得 する 。 


Var 755g77 の ox = 777g/7e.hasAttribute("sandbox"): 
イン ライ ン フ レー ム iframe に サン ド ボ ッ クス 指定 が され て いる か どう か を 取得 する 。 





ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 O 〇 O 〇 O O 〇 O () 


| 参照 【SAMPLE】 イ ン ラ インフ レー ム を 操作 する ・・PO84 
ヒ 衝 旋 
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MINIDe の Ao りり 


別 の ウィ ンド ウ を 
操作 する 












オー プン 元 の ウィ ンド ウ か ら 新 し く 開い た ウィ ンド ウ の 背景 色 を 操作 する サン ブル で す 。 元 
の ウィ ンド ウ が 立ち 上 が る と 、 新 た に サブ ウィ ンド ウ が 開き 、 元 の ウィ ンド ウ の セレ クト ボッ 
クス で 色 を 選択 する こと に よっ て サブ ウィ ンド ウ の 背景 色 を 変更 で きま す 。 元 の ウィ ンド ウ の 
[サブ ウィ ンド ウ を 閉じ る ] ボ タン で は サブ ウィ ンド ウ を 閉じ る こと が で きま す 。 

存在 し な い ウ ィ ン ド ウ ( 既 に 閉じ て いる ウィ ンド ウ ) を 操作 し よう と する と 、 エ ラー に な る の 
で 間 操 作 を 実行 する 前 に ウィ ンド ウ が 閉じ て いる か 確認 し まし ょ う 。 閉 じ て い る 場合 は return 
で 関数 か ら 抜け て 処理 を 行わ な いよ うに し て 、 ダ イア ログ を 表示 し ます 。 


Var 7ey 族 77> 





/ 新 し い ウ ィ ン ド ウ を 開く 関数 
function ope7MW77(){ 
window.name = "openerWin": // オ ー プ ン 元 ウィ ンド ウ の 名 前 を "openerWin' に 設定 
7ewMM77 = window.open( "subwindow.html", "newWin", "status=1,width=480, 
height=240"):/ 変数 newWin は 他 の 関数 で も 使用 する た め 、var 宣 言 は し な い 


} 


// サ ブウ ィ ン ド ウ を 閉じ る 関数 
function c/oseMW77(){ 


// サ ブウ ィ ン ド ウ が 既に 閉じ て いる 場合 、 ダ イア ログ を 表示 
if(7ewMW77.closed){ 

alert(" 既 に 閉じ て いま す "): 

Teturn: 


} 


7ey 廊 77.close (): 
alert(" サ ブウ ィ ン ド ウ を 閉じ まし た "): 
} 


// オ ー プ ン 元 ウィ ンド ウ の 名 前 を 参照 する 関数 
function 9eWa/7e(){ 
document.qetElementById( "7exz7 ").value = window.opener.name: 


} 


// サ ブウ ィ ン ド ウ の 背景 色 を 変更 する 関数 
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ー い NMNIY へ MINY 








の 寺 満 放 T デ アヘ 8 届い て と 座 で て 己 凌 代 選 


[テマ ュ ] 











function c7a7geCo/o/(77 の ex){ 





// サ ブウ ィ ン ド ウ が 既に 閉じ て いる 場合 、 ダ イア ログ を 表示 
f(7ewMW77.closed){ 
alert( "サブ ウィ ンド ウ が 既に 閉じ て いる の で 操作 で きま せん 。『): 
return: 


} 











// セ レク ト ボ ックス の index の 値 を 参照 し て 背景 色 を 変更 
switch( 罰 ex){ 
Ccase 0: 
break: 
Case 1: 
7ewM 妨 .document.bqColor = "fffff": 
break: 
Case 2: 
7eWyMW 妨 .document.bgColor = "#ff0000": 
break: 
Case 3: 
7eyM77.document.bgColor = "#00ff00": 
break: 
CaSe 4: 
7ey 放 77.document.bgColor = "#0000ff": 
break: 


<body onload="ope7MM77() "> 
<form action="" > 
<D> 
<b> サ ブウ ィ ン ド ウ の 背景 色 を 変更 し ます </b> 
<select onchange="c7a7geCo/o/(selectedIndex) "> 
<option selected="selected"> 選 択 し て くだ さい </option> 
<option> 白 </option> 
<option> 赤 </option> 
<option> 緑 </option> 
<option> 青 </option> 
</select> 
</D> 
<P><input type="button" value=" サ ブウ ィ ン ド ウ を 閉じ る " onciick="c/oseW77()" 
/></P> 
</form> 
</body> 
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※subwindowhtml 
<body onload="g9eWa/7e() "> 
<form action=""> 
<P> 元 ウィ ンド ウ の 名 前 :<1nput type="text" id="text1" /></D> 
</form> 
</bodV> 


Internet Exp 


回 2 ント を する * 
サブ ウィ ンド ウ の 背景 色 を 変更 し ます | 選択 し て くだ さい ツマ 


サブ ウィ ンド ウ を 閉じ る 

















倫 http://wwwvshoeisha.oomybook/pc/dic/work/sample/JSdic/sample/JSdic/ 還 





元 ウ ィ ン ド ウ の 名 前 :|openerwin 














サブ ウィ ンド ウ (subwindow.htmD が 表示 され ます 。 サブ ウィ ンド ウ に は getName 関 数 に よっ て 親 
ウィ ンド ウ 名 が 表示 され ます 





5 3 - ロ 了 林 思 
き 人 http://wwweshoelsha.com) ・ 邑 C | 人 釣 の ウィ ンド ウ を 舞 作 する x | 
サブ ウィ ンド ウ の 背景 色 を 変更 し ます | 選択 し て < だ さい マ 


サブ ウィ ンド ウ を 閉じ る 








作 サブ ウィ ンド ウ を 閉じ まし た 


























@⑥[ サ ブウ ィ ン ド ウ を 閉じ る ] ボ タン を クリ ッ ク す る と サブ ウィ ンド ウ が 閉じ ます 。 サブ プ ウ ィ ン ド ウ を 
閉じ た 状態 で 、[ サ ブウ ィ ン ド ウ を 閉じ る ] ボ タン を クリ ッ ク す る と 、 警 告 ダ イア ログ が 表示 され ます 
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| 
ーーーーーーー 








open プロ パテ ィ 
上 E 妥 : close プロ パテ ィ 






3 





ココ 纏 htp:/wwwshoeisha.oo D・ 品 G| 別 の ウィ ンド ウ を 提 作 する 


サブ ウィ ンド ウ の 背景 色 を 変更 し ます 


サブ ウィ ンド ウ を 閉じ る 








給 http://www.shoeisha.com/book/pc/dic/work/sample/JSdic/sample/J5dic/ 





⑨ 元 の ウィ ンド ウ で は サブ ウィ ンド ウ の 痛 景色 を 変更 する こと が 可能 で す 





opener プロ パテ イィ 一 ーー ドー ーー P07Z 
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P074 closed プロ パテ ィ ー・ 
・P076 name プロ パテ ィ ド ドー 









MINIe の 4 り 4 


ウィ ンド ウ の 位置 と 
サイ ズ を 指定 する 


ウィ ンド ウ の サイ ズ を 指定 し 、 モ ニタ の 中 央 に 表示 する サン プル で す 。 ウ ィ ン ド ウ を モニ タ 
の 中 央 に 表示 する に は 、 ま ず モ ニタ の サイ ズ を 調べ 、 そ の 値 を 2 で 割っ た 値 を 取得 し ます 。 さ 
ら に 表示 する ウィ ンド ウ の 幅 、 高 さ の 1 プ 2 を 引い た 座標 を movoTo メ ソ ッ ド で 指定 すれ ば 実 
現 で きま す 。 

ウィ ンド ウ 内 の ドキ ュ メ ント は ウィ ンド ウ の 各 サ イズ を 取得 し て 表示 し ます 。 その 際 、 ブ ラ 
ウザ に よっ て プロ パテ ィ へ の 対応 が 異な る た め 、 処 理 を 振り 分 け て いま す 。 

な お 、Internet Explorer は 、IE8 ま で は 、outerWidth 、outerHeight 、innerWidth 、 
innerHeight プ ロ パ ティ に 対応 し て いま せん 。 innerWidth、innerHeight プ ロ パ ティ の 代わ 
り に clientWidth、clientHeight プ ロ パ ティ を 使用 し て ウィ ンド ウ の 内 側 の 幅 と 高 さ を 取得 で 
きま す 。 た だ し 、clientWidth、clientHeight プ ロ パ ティ は 表示 モー ド に よっ て 参照 方 法 が 異 
な る た め 、document.compatMode プ ロ パ ティ で 表示 モー ド を 取得 し ます 。 標 準 準拠 モー 
ド の 場合 は CSS1Compat、 互 換 モ ー ド の 場合 は BackCompat が 返り ます 。 標準 準拠 モー ド の 
場合 は document.documentElement.clientWidth、 互 換 モ ー ド の 場合 は document.body. 
clientWidth で 取得 し ます 。 また 、 こ の サン プル で は 「 ウ ィ ン ド ウ の 横幅 」(outerWidth)、 「 ウ 
ィ ン ド ウ の 縦 幅 」(outerHeight) に は 「 参 照 不 可 ] と 表示 し ます 。 

※ ブ ラウ ザ で は 表示 モー ド を DOCTYPE 宣 言 で 判断 し て いま す 。 本 サン プル は 、 各 ブ ラウ ザ の 
最新 バー ジョ ン で は 標準 モー ド と し て 認識 され ます 。 





resizeTo(400,400): // ウ ィ ン ド ウサ イズ を 設定 する 
moveTo(screen.width/2-200,screen.height/2-200): // ウ ィ ン ド ウ を 中 央 に 表示 させ る 
window.onresize = /es7zelW77: // ウ ィ ン ド ウ の サイ ズ が 変更 され た と き 、resizeWin 関 数 を 


呼び 出す 


// ウ ィ ン ド ウ の サイ ズ を 参照 する 関数 
function 7es7zeW7(){ 

Var 7e57 = "参照 不可 

Var e/e7e77 = document.getElementById("7o/777"): // 絆 り 返 し 使 つ 寺 言 等 は 変 
数 に 代入 する 


ブラ ウザ に よっ て 振り 分 け 
//innerWidth が 有効 な ブラ ウザ (Internet Explorer 以 外 ) 
if(window.innerWidth){ 
e/e77e7777.7ex7[0].value = document.compatMode: 
e/e77e77.7ex7[1].value = window.innerWidth: 
e/e77e777.7ex7[2].value = window.innerHeiqht: 
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[テマ ヽ ] 




















e/e77e7777.7ex7[3].value = window.outerWidth: 
ee77e777.7ex7[4].Value = window.outerHeight 

//Internet Explorer 標準 準拠 モー ド 

}else if(document.documentElement && document.documentElement. 

ciientWidth != 0){ 

e/e77e777.7ex7[0] .Value = document.compatMode: 
e/e/7e77.fex[1].Value = document.documentElement.clientWidth: 
e/e/7e7777.7ex7[2].value = document.documentElement.clientHeight: 
@/e/7e777.7ex7[3].value = 7e5 か : 
e/e/77e777.7ex7[4].value = 7e5 か > 
Internet Explorer 互換 モー ト 

}else{ 
e/e77e777.7ex7[0].value = document.compatMode: 
e/e77e7777.7ex7[1].value = document.body.clientWidth: 
ee77e777.7exf[2].value = document.body.clientHeight: 
e/e77e77.7ex7[3].value = 7e5 が > 
e/e/7e7777.7ex7[4].value = 7e5 か 7: 














<body onload="7eszeW 罰 ()" > 

<form action="" id="77777 "> 
<P><b> ブラ ウザ の 表示 モー ド </b><input type="text" name="7ex7" /></P> 
<P><b> ウ イン ドウ 内 側 の 横幅 </b><input type="text" name="zexf" /></p> 
<P><b> ウ イン ドウ 内 側 の 縦 幅 </b><input type="text" name="7ex7" /></P> 
<P><b> ウ イン ドウ 外側 の 横幅 </b><input type="text" name="7ex7" /></P> 
<P><b> ウ イン ドウ 外側 の 縦 幅 </b><input tVpe="text" name="7exf" /></D> 

</form> 


</bodV> _ 
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Internet Exp 

















<):・ 到 ] http - 症 加 | 語 | に >] 


資 お 気に入り | 誠 ウ ンド 位置 と サイ ズ を 。 








ブラ ウザ の 表示 モー ド |css1csmpst 
ウイ ンド ウ 内 側 の 横幅 gg 

ウイ ンド ウ 内 側 の 終 幅 74 

ウイ ンド ウ 外 側 の 横幅 を 照 下 可 
ウイ ンド ウ 外 側 の 魚 幅 多 照 可 





ウ 
イ 
の 
ド 
ウ 
の 
位 
軒 
と 
サ 
イ 
スズ 
を 
指 
定 
す 
る 











人 @ ター ネッ ト 





IE8 は outerWidth、outerHeight プ ロ パ ティ に 対応 し て いな いた め 、「 ウ ィ ン ド ウ 外 側 
の 横幅 」、「 ウ ィ ン ド ウ 外 側 の 縦 幅 」 に は 「 参 照 不可 ] と 表示 され ます 

















Firefox * 
ウィン ドウ の 位置 と サイ ズ を 指定 する 
を wwshoeisha.comx で | 岡 -cooog の | 舎 困 ・ 


ュー ン 





ブラ ウザ の 表示 モー ド css1compat 
ウイ ンド ウ 内 側 の 横幅 46e 
ウイ ンド ウ 内 側 の 終 幅 soe 
ウイ ンド ウ 外 側 の 横幅 4eo 
ウイ ンド ウ 外 側 の 縦 幅 4oo 






モニ タ の 中 央 に ウィ ンド ウ が 表示 され ます 
ウィ ンド ウ の サイ ズ を 変更 する と 、 各 サ イズ の 数 値 が 更新 され ます 


3 照 NOV の の NR の NEC P078 innerHeight プロ バテ ィ 
| 湖 守 resizeTo メソ ッ ド ・ P079 outerWidth プロ パテ ィ 
innerWidth プロ パテ ィ PO080 outerHeijght プロ パテ ィ 
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WINDOW.SAMPLE-03 | 


、。 ブラ ウザ の ボタ ン と 
| 同様 の 処理 を する 





ブラ ウザ の ボタ ン や メニ ュー 項目 と 同じ 働き を する ボタ ン を ウィ ンド ウ 上 に 配置 し た サン プ 
| ル で す 。 Internet Explorer で は print メ ソ ッ ド 以外 は 対応 し て いな いた め 、 処理 を 分 岐 させ て 
』 ダイ アロ グ を 表示 する よう に し て いま す 。 


サテ デュ サ 


Var 7e577 = "Internet Explorer で は この 操作 は で きま せん 。"* 
ダイ アロ グ に 表示 する メッ セー: 
Var oo/7E = navigator.appName.index0f("Microsoft")>-1: 


ブラ ウザ が Internet Explorer か どう か の bool 値 


// 戻 る 処理 の 関数 
| function の azc/gge り { 
(の go/7/){ 
| alert(7e57): 
return: 
} 
back(): 


// 進 む 処 理 の 関数 
function rg/ の Page り { 
if( の go/7Z){ 
alert(7e57): 
Teturn: 


+ 


} 


forward(): 





// ホ ー ム に 移動 する 処理 の 関数 
function 7o77e/gge り { 
if(pgo/7/){ 
alert(7e57): 
return: 
日 } 
home(): 


} 





// 読 み 込み を 中 止 する 処理 の 関数 


092 | WINDOWSAMPLE-03 





function sfop/gge{ 
f( の oo/7 な ){ 
alert(7e57): 
return: 


top(): 


検索 する 処理 の 関数 
function が ggge り { 
(の oo/7/){ 
alert(7e5): 
Teturn: 
} 
find(): 


| 


<body> 
<form action=""> 
<D> 


</D> 
</form> 


| ツ body> 
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|TTWL SS ここ ~ 2 


<input type="button" value=" 戻 る " onclick= "の ac ん /gge()" /> 

<input type="button" value=" 進 む " onclick="7/wg/ の 7gge()" /> 
<input type="button" value=" ホ ー ム "onclick="/o77e/gge()" /> | 
<input type="button" value=" 印 刷 " onciick="p7777()" /> | ー 
<input type="button" value=" 中 止 " oncliick="s7op/ge()" /> 
<input type="button" value=" 検 索 "onclick=" が 7 の 7gge()" /> 








[ テ ヽ ] 
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[印刷 ] ボ タン は ブラ ウザ の [印刷 ] ボ タン と 同様 の 効果 を 実現 し ます 。 
た だ し 、 そ れ 以 外 の ボタン は Internet Explorer で は 動作 し ませ ん 


Firefox 

-} ブラ ウザ の ボ タン と 同様 の 処理 を する 

和 を ⑨ www.shoeisha.comnc G 
ュー ンジ 


ホー ム 印刷 | 中止 





Firefox で は [検索 ] ボ タン を 含め すべ て の ボタ ン が 使用 で きま す 








1 RO0BYDMNNE 光 ブダ 民 So が 2 で AS4 PO83 
デン が forward メソ ッ ド ー………・ oO めい 2 6 
home メソ ッ ド ドド PO083 find メソ ッ ド 
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WINDOW.SAMPLE-04 


イン ライ ン フ レー ム を 
操作 する 






| 
| 
| 
| 
| 
| 


イン ライ ン フ レー ム で 、 包 含 す る 「 親 」 と 包含 され る 「 子 ] の 、2 つ の ドキ ュ メ ント の 間 の 、 ス 
クリ プ ト に よる 相互 アク セス を 実装 し た サン プル で す 。 親 か ら 子 の ドキ ュ メ ント は iframe オ 
ブ ジ ェクト の contentDocument プ ロ パ ティ で 取得 し 、 子 か ら 親 の ドキ ュ メ ント は window. 
parent.document で 取得 し ます 。 


sandbox 属 性 に 「allow-scripts allow-same-originl の 2 つの キー ワー ド を 指定 する こと で 、 
サン ド ボ ッ クス 環境 で あり つつ 、 子 ドキ ュ メ ント に スク リプ ト 実 行 と 親 ド キュ メン ト へ の アク | 
セス を 許可 し て いま す 。allow-same-origin が 指定 され な いと 、 二 つの ドキ ュ メ ント は 強制 的 
に 別 ド メイ ン の 扱い と な り 、 基 本 的 に は 親 か ら 子 へ の アク セス も で きま せん 。 


キー ワー ド に は 以下 の よう な も の が あり ます 。 複数 の キー ワー ド は 半角 スペ ー ス で 区 切っ て 
指定 し ます 。 


| ノ 
ララ 
ウ 
ザ 
の 
ボ 
タ 
ン | 
と 

| 同 

| 様 

| の 

| 処 
理 

| を 

| す 

| る 

1 イ 

| ン 
ラウ 
イ 
ジ 
う 
(| 

| ム 
操 

| 作 

| す 

| る 


キー ワー ド ! 説明 

iallow-scripts JavaScript の 実行 を 許可 し ます 。 

allow-forms ! フォ ー ム の 送信 を 許可 し ます 。 

! allOw-same-origin ”。 | 強制 的 な 別 ドメイン 扱い に よる アク セス 制限 を 解除 し ます 。 
! allow-top-navigation トッ プ ウィ ンド ウ の 操作 を 許可 し ます 。 
iallow-popupPs 。 ! ウィ ンド ウ を 開く 操作 を 許可 し ます 。 





ウ 
1 イ 
| ン 

ド 

P 
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※ 親 ( 外 ) 側 の ドキ ュ メ ント の javaScript 


function ogag/7ag7g/er(){ 
Var が ag/7e = document.getElementById( "77y77a77e"): 


Var 7s77e oc = 妨 g/7e.contentDocument: 

Var 5776 の = 7s77e goc.getElementById("7a7_area02"): 

inside_div.innerHTML = "この 文章 は 親 ド キュ メン ト か ら <br> 内 側 の ドキ ュ メ ント へ の 書 
き 込 み で す 。『"* 


IT ※ 親 ( 外 ) 側 の ドキ ュ メ ント の HTML 
<body> 


<iframe 
sandbox="allow-scripts allow-same-origin" 
onload="o7/ga の 7ag7g/e7() " 
1d="77y7g77e" 
src="window04_inside_4th.html"> 
</1frame> 





<div id="77ag77_g7eg の 7 "></div> 
</bodV> 


EE ※ 子 (内 ) 側 の ドキ ュ メ ント の javaScript 


Var 9 が 577e oc = window.parent.document: 
Var gg が 577e_ の 7 = og が s77e_oc.getElementById("7a 如 _area07"): 
9757 の 7.innerHTML = "この 文章 は 内 側 の ドキ ュ メ ント か ら <br> 親 ドキ ュ メ ント へ の 書き 














込み で す 。『"* 
導 N ア ※ 子 (内 ) 側 の ドキ ュ メ ント の HTML 
<body> 
<div id="77a77_g7ea02"></div> 
</body> 
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で Internet Explorer 





の dl 革 落 トー で VMIV ユ SN 


この 文章 は 内 側 の ドキ ュ メ ント か ら 
親 ド キュ メント へ の 書き 込み で す 。 


イン ライ ン フ レー ム の 中 身 に 外側 か ら 文字 列 を 書き 込み 、 同 時 に 、 内 側 か ら も 外側 の ドキ ュ メ ント に 
文字 列 を 書き 込ん で いま す 





上 E 及 | 区 contentDocument プロ パテ イィ ーー・ PO84 
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| SCREENO1 SS )~ 5 還 還 EE 
、 モニ タ の 有効 領域 を 参照 し た い 





ーーー- オ 「 
| 
| 文 .availHeiqght 有効 な 人 域 の 高 さ を 参 照 | 
_ | 文 .availWidth 有効 な 名 電 の 幅 を 参 
| .availLeft 有効 な 左端 の X 座 標 を 参照 
| 文 .availTop 有効 な 上 端 の Y 座 標 を 参照 





| 本 


衣 ……Screen オ ブ ジ ェクト 





プロ パテ ィ 





モニ タ の 有効 領域 の サイ ズ 、 ま た は 端 の 座標 を 参照 し ます 。 


| availWidth、availHeight プ ロ パ ティ 

モニ タ の 表示 サイ ズ か ら メ ニュ ー バ ー や タス ク バ ー な どの 部 分 を 除い た 有効 領域 の サイ ズ を 
参照 する プロ パテ ィ で す 。availWidth プ ロ パ ティ は 有効 領域 の 幅 、availHeight プ ロ パ ティ は 
] 有効 領域 の 高 さ を 返し ます 。 


availLeft、availTop プ ロ パ ティ 
| モニ タ に お ける 有効 領域 の 端 の 座標 を 参照 し ます 。availLeft プ ロ パ ティ は 有効 な 左端 の X 座 
標 、availTop プ ロ パ ティ は 有効 な 上 端 の Y 座 標 を 返し ます 。 


aw = Screen.availWidth: 
有効 な 領域 の 幅 を 変数 aw に 代入 し ます 。 


ーーー オ 
ah = screen.availHeight / 2: 
有効 な 領域 の 高 さ を 2 で 割っ た 値 を 変数 ah に 代入 し ます 。 
| document.write ("表示 サ イズ の 幅 " + screen.availLeft): 
ーー モニ タ の 有効 な X 座 標 を 書き 出し ます 。 


at = screen.availTop: 
モニ タ の 有効 な Y 座 標 を 変数 at に 代入 し ます 。 
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Column Screen オ ブ ジ ェクト 


Screen オ ブ ジ ェクト は モニ タ の 表示 サイ ズ や 使用 で きる 色 の 数 (カラ ー パ レッ ト ) の 設定 な ど 画 
面 に 関す る 情報 を 参照 設定 で きま す 。 





p ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
へ 人 へ 〇 O 〇 O 〇 へ あ O 


※IE と Opera は availLeft、availTop に 非 対 応 


| 照 ウィ ンド ウ の 位置 を 指定 し た い 
7 ウィ ンド ウ の サイ ズ を 変更 し た 
ウィ ンド ウ の サイ ズ を 調べ た い 


P078 
P079 
PO080 
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記 s3NKy 福 証 証 証 証 証 請 。 … さ …⑯⑲ー パ AKA パ 、「_ ー 
モニ タ の 表示 サイ ズ を 参照 し た い 


文 .Width モニ タ の 高 さ を 参照 
文 .height モニ タ の 幅 を 参照 





衣 ……Screen オ ブ ジ ェクト 





プロ パテ ィ 





モニ タ の 表示 サイ ズ を 参照 し ます 。width プ ロ パ ティ は 幅 、height プ ロ パ ティ は 高 さ を 表し 
ます 。 


W = screen.width: 
モニ タ の 表示 サイ ズ ( 幅 ) を 変数 w に 代入 し ます 。 


alert(" こ の モニ タ の 表示 サイ ズ の 高 さ は " + screen.height + "で す 。 "): 
モニ タ の 表示 サイ ズ ( 高 さ ) を ダイ アロ グ に 表示 し ます 。 








ト ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 〇 O O 〇 〇 O 〇 〇 
上 参照 ウィ ンド ウ の 位置 を 指定 し た い -・‥・・ P078 
5 ウィ ンド ウ の サイ ズ を 変更 し た い ・-・・- -・- -- P079 
ウィ ンド ウ の サイ ズ を 調べ た い ・- PO80 
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モニ タ の 表示 色 の 設定 を 参照 し た い 


文 .colorDepth 表示 で きる 色 数 を 参 昭 
文 .DixelDepth オフ スク リー ン の 色 梁 度 を 参 照 





衣 ……Screen オ ブ ジ ェクト 








茹 皇 プロ バテ ィ 


モニ タ の 表示 色 の 設定 を 参照 し ます 。 


colorDepth プ ロ パ ティ 
モニ タ の 色 深 度 (表示 で きる 色 数 ) を ピッ ト 値 で 返し ます 。 


pixelDepth プ ロ パ ティ 

オフ スク リー ン の 色 深 度 (1 ピ クセ ル に 必要 
な ビッ ト 数 ) を ピッ ト 値 で 返し ます 。 返さ れ 
る 値 は 右 の 表 の 通り で す 。 な お 、IE8 ま で の 
Internet Explorer は pixelDepth プ ロ パ ティ 
に 対応 し て お ら ず 、 値 と し て 常に undefined 
が 返さ れ ま す 。 


f(screen.colorDepth <= 16) { 
alert( “TrueColor の 環境 で ご 覧 くだ さい 。"): 


HighColor 以下 の 場合 、「TrueColor の 環境 で ご 覧 くだ さい 。] と いう ダイ アロ グ を 表示 し ます 。 


alert(screen.pixelDepth): 
オフ スク リー ン の 色 深度 を ダイ アロ グ に 表示 し ます 。 





, ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 
O O 人 へ 〇 O 〇 O O O 〇 O 〇 


※ IE8 は pixcelDepth に 非 対 応 
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SCREEN.SAMPLE-01 


ウィ ンド ウ を | 
画面 中 央 に 表示 する 


ウィ ンド ウ の 幅 と 高 さ を モ ニタ の 有効 範囲 の 半分 の サイ ズ に し 、 こ の ウィ ンド ウ を モニ タ の 
有効 範囲 の 中 央 に 表示 する サン プル で す 。 

ウィ ンド ウ の 幅 と 高 さ を モニ タ の 有効 範囲 の 半分 の サイ ズ に する た め に は 、 ま ず 
availWidth、availHeight プ ロ パ ティ で モニ タ の 有効 範囲 の サイ ズ を 取得 し 、 そ の 値 を 2 で 割 
つっ た 値 を resizeTo メ ソ ッ ド の 引数 に 指定 し て サイ ズ を 変更 し ます 。 

次 に moveTo メ ソ ッ ド を 使用 し て 、 ウ ィ ン ド ウ の 表示 位置 を 設定 し ます 。 moveTo メ ソ ッ ド 
は 引数 に 指定 し た モニ タ 左 上 か ら の 座標 位置 に ウィ ンド ウ を 移動 させ る メソ ッ ド で す 。 その た 
め 、 幅 、 高 さと も に 半分 に リサ イズ し た ウィ ンド ウ を モニ タ 中 央 に 表示 する に は 、 ウ ィ ン ド ウ 
の 左上 の 座標 が モニ タ の 有効 範囲 の 1/4 の 位置 に な る よう に し ます 。 








resizeTo (screen.availWidth/2, screen.availHeight/2): // ウ ィ ン ド ウサ イズ の 設定 
moveTo(screen.availWidth/4, screen.availHeight/4): // ウ ィ ン ドウ 表示 位置 の 設定 











<body> 
<p><b> こ の ウィ ンド ウ は 画面 の 中 央 に 表示 され ます </b></p> 
</body> 
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画面 が モニ タ 中 央 に 表示 され ます 
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文 . フ ォ ー ム 名 フォ ー ム を 参照 
forms[ 参 照 番号 ] フォ ー ム を 参照 

文 .forms.length フォ ー ム の 数 を 参照 
人 .name フォ ー ム の 名 前 を 参 昭 


衣 ……Document オ ブ ジ ェクト 
3 Form オ ブ ジ ェクト (フォ ー ム 名 また は forms[ 参 照 番 号 ]) 





司 旦 還 オブ ジェ クト (Form)、 プ ロ パ ティ (forms.length、name) 





Form オ ブ ジ ェクト 

フォ ー ム を 参照 する に は 、 名 前 (フォ ー ム 名 ) や 参照 番号 を 利用 し ます 。 フ ォ ー ム 名 は 
く form> タ グ の name 属 性 ある い は id 属性 で 指定 され て いる フォ ー ム の 名 前 で す 。 た と えば 、 
く form name="'enqForm"> と 指定 され て いる フォ ー ム を 参照 する 場合 は 次 の よう に な り ま す 。 

document.enqForm 

document.forms["enqForm"] 

参照 番号 を 利用 する 方 法 は 、 ド キュ メン ト 中 の フォ ー ム を 要素 と する 配列 か ら 、 そ の 参照 番 
号 に 対応 する フォ ー ム に アク セス し ます 。 指定 する 際 は forms[ 参 照 番 号 ] と いう 形式 に な り ま 
す 。 フォー ム の 参照 番号 は ドキ ュ メ ント の 中 に フォ ー ム が 記述 され て いる 順番 で 、0 か ら の 連 
番 に な り ま す 。 た と えば 、 ド キュ メン ト 中 の 2 番目 の フォ ー ム を 参照 する 場合 は 次 の よう に な 
り ま す 。 

document.forms[1] 


forms.length プ ロ パ ティ 
ドキ ュ メ ント の 中 に ある すべ て の フォ ー ム の 数 を 参照 し ます 。 


name プ ロ パ ティ 
フォ ー ム の 名 前 を 参照 し ます 。 
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ン と で て 己 音 N テ ー さ | 


Column フォ ー ム を DOM で 参照 する 場合 


<form id enqForm'> と 指定 され て いる フォ ー ム を DOM で 参照 する 場合 は 次 の よう に な り ま 
す 。 


document.qetElementById("enqForm") 
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文 。action 送信 先 を 参照 / 設 定 

大 。EHCOd1n エンコード 方 式 を 参照 設定 
文 。method 送信 形式 を 参照 / 設 定 

文 .target ター ゲッ ト 名 を 参照 設定 







茹 撤 還 プロ パティ 






form 要 素 の 各 属 性 で 指定 され る フォ ー ム の 送信 先 や 送信 方 法 に 関す る プロ パテ ィ で す 。 こ 
れ ら の 設定 に javaScript を 利用 する こと に より 、 ユ ー ザ ー の 選択 や 環境 に よっ て 送信 先 や エン 
コー ド 方 式 、 送 信 方 法 を 変更 で きま す 。 


action プ ロ パ ティ 
form 要 素 の action 属 性 に 該当 する デー タ の 送信 先 を 参照 / 設 定 し ます 。 


encoding プ ロ パ ティ 
form 要 素 の enctype 属 性 に 該当 する デー タ を 送信 する 際 の エン コー ド 方 式 (MIME タ イブ) 
を 参照 / 設 定 し ます 。 


method プ ロ パ ティ 
method 属 性 で 指定 する 送信 方 式 を 参照 / 設 定 し ます 。 値 は post ま た は get に な り ま す 。 


target プ ロ パ ティ 


フォ ー ム の 内 容 を 送信 し た 結果 を 表示 させ る フレ ー ム 名 また は ウィ ンド ウ 名 を 参照 / 設 定 し 
ます 。 
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ぁ ブラ ウザ 対応 表 IE10 1 ミリ Fx Chrome 





中 を 県 2 


〇 O O O O O 


フォ ー ム の 内 容 を リセ ッ ト / 送 信 し た い ・・・・ P110 
【SAMPLE] フォ ー ム の 送信 先 や 送信 方 法 を 設定 する ・・P120 


トド E」E1il 


9 りり FI 





IOS6 Android 


O 〇 O 


FORA.02 | 107 





ン r で 研 鞭 本 嘱 村 画 記さ 帯 画 記 テー ミュ 


[テー ミュ] 














文 . エ レ メ ン ト エレ メン ト を 参照 
文 .elements[ 参 照 番 号 ] エレ メン ト を 参照 


文 .length エレ メン ト の 数 を 参照 
を .length エレ メン ト の 数 を 参照 
.type エレ メン ト の 種類 を 参照 
.name エレ メン ト の 名 前 を 参照 


文 ……Form オ ブ ジ ェクト (フォ ー ム 名 また は forms[ 参 照 番号 ]) 
……Element オ ブ ジ ェクト (エレ メン ト 名 また は elements[ 参 照 番号 ]) 


茹 衣 一 オブ ジェ クト (Element) 、 プ ロバ パティ (length、length、type、 name) 





ボタ ン 、 チ ェ ッ クボ ックス 、 選 択 メ ニュ ー な どの フォ ー ム の 名 部品 を エレ メン ト と いい ます 
(エレ メン ト の 種類 に つい て は 次 ペー ジ を 参照 ) 。 


elements オ ブ ジ ェクト 
エレ メン ト を 参照 する に は 、 エ レ メ ン ト の 名 前 (エレ メン ト 名 ) や 参照 番号 を 利用 し ます 。 エ 
レ メ ン ト 名 と は <input> な ど エ レ メ ン ト を 定義 する 各 タ グ の name 属 性 ある い は id 属性 で 設定 
され て いる 名 前 で す 。 た と えば <input type="text' name="mail' / > と 指定 され て いる エレ 
メン ト を 参照 する 場合 は 次 の よう な り ま す 。 
文 .mail 
娘 .elements["mail"] 
大 …… エ レ メ ン ト が 含ま れる フォ ー ム 
参照 番号 を 利用 する 方 法 は 、 フ ォ ー ム 中 の エレ メン ト を 要素 と する 配列 か ら その 参照 番号 に 
対応 する エレ メン ト に アク セス し ます 。 指定 する 際 は elements[ 参 照 番 号 ] と いう 形式 に な り 
ます 。 エ レ メ ン ト の 参照 番号 は 、 フ ォ ー ム の 中 で エレ メン ト が 記述 され て いる 順番 で 、0 か ら 
の 連 番 で す 。 た と えば フォ ー ム 中 の 2 番目 の エレ メン ト を 参照 する 場合 は 次 の よう に な り ま す 。 
文 .elements[1] 
衣 …… エ エレメント が 含ま れる フォ ー ム 


length プ ロ パ ティ 
フォ ー ム に ある すべ て の エレ メン ト の 数 を 参照 し ます 。Form オ ブ ジ ェクト の length プ ロバ 
ティ と Element の 配列 の length プ ロ パ ティ は 同じ 値 を 返し ます 。 
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type プ ロ パ ティ 
エレ メン ト の 種類 を 参照 し ます 。 エレメント に は 以下 の 種類 が あり ます 。 


エレ メン ト ' 意味 エレ メン ト 
i button 
dheckbex 





HTML5 で は 、 右 の 表 の フィ ー ル ド が 追加 され まし た 。 導 際 選 「 意味 


document.write(document.fes の /77.mail.value): 
フォ ー ム 名 test_form の エレ メン ト 名 mail に 入力 され て いる 文字 列 を 表示 し ます 。 


document.Zes# 7o/77.elements[0].focus(): 
フォ ー ム 名 test_form の 1 番目 の エレ メン ト に フォ ー カ ス を 合わ せま す 。 








Column エレ メン ト を DOM で 参照 する 場合 
<input type='text' name="mail' id="mail'/ > と 指定 され て いる エレ メン ト を DOM で 参照 
する 場合 は 次 の よう に な り ま す 。 


文 .getElementById("enqForm") 





エレ メン ト が 含ま れる フォ ー ム 


テ ブラ ウザ 対応 表 IE10 1 3:) Fx Chrome Safari Opera iOS6 Android 
O (⑨ 〇 O O 〇 O O O 〇 O 


| 参照 プ ォ ー ム を 参照 だ た beee emmnyee noe P104 
ロ 【SAMPLE】 選 択 さ れ て いる 項目 を 調べ る ・・‥・P124. 
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弄 作 th 叶 ら テー 


RG 
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| 
| 


| 


フォ ー ム の 内 容 を リセ ッ ト プ | 
送信 し た い 


文 .reset( ) フォ ー ム の 内 容 を リセ ッ ト 
文 。SU bmtt( ) フォ ー ム の 内 容 を 送信 





娘 ……FOorm オ ブ ジ ェクト (フォ ー ム 名 また は forms[ 参 照 番号 ]) 





メソ ッ ド 





それ ぞ れ フォ ー ム の 内 容 を リセ ッ ト 、 送 信 す る メソ ッ ド で す 。 submit メ ソ ッ ド を 利用 し て 
送信 する 場合 に は 、 セ キュ リティ 警告 が 表示 され た り 、 期 待 し た と お り に 動作 し な か っ た りす 
る こと が ある の で 注意 が 必要 で す 。 


document.7o/777.reset(): 
フォ ー ム 名 form1 の 内 容 を リセ ッ ト し ます 。 


document.form1.submit(): 
フォ ー ム 名 form1 の 内 容 を 送信 し ます 。 








ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera ijOS6 Android 
O 〇 〇 〇 〇 〇 〇 〇 O 


l 参照 フォ ー ム の 送信 ノリ セッ ト 時 に 処理 を 行い た い ・- P136 
| 池宮 【SAMPLE】 フ ォ ー ム の 内 容 を 送信 する ・・・・・・ P126 
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選択 され て いる か を 調べ た い 


文 .Checked チェ ッ ク 状 態 を 参照 設定 
文 .0ptions[ 参 照 番号 ] .Selected KW を を 





衣 ……Element オ ブ ジ ェクト (エレ メン ト 名 また は elements[ 参照 番号 ]) 





プロ パテ ィ 


ーー 
ン 


チェ ッ ク ボ ックス や ラジ オ ボ タ ン 、 セ レク トメ ニュ ー の メニ ュー 項目 の 状態 を 参照 / 設 定 す 
る プロ パテ ィ で す 。 


checked プ ロ パ ティ 
指定 し た チェ ッ ク ボ ックス や ラジ オ ボ タ ン の 選択 状態 を 参照 設定 し ます 。 選 択 さ れ て いる 
合 は true、 さ れ て いな い 場 合 は false を 返し ます 。 


selected プ ロ パ ティ 

指定 し た メニ ュー 項目 の 選択 状態 を 参照 設定 し ます 。 選択 され て いる 場合 は true、 さ れ 
て いな い 場 合 は false を 返し ます 。 メ ニュ ー 項 目 は options[ 参 照 番号 ] と いう 形式 で 指定 し ます 。 
1 番目 の メニ ュー 項目 の 参照 番号 は 0 に な り ま す 。 


文例 
document.g7g/ の 777.elements[0].checked = true: 

フォ ー ム 名 dataForm の 1 番目 の エレ メン ト ( チ ェ ッ クボ ックス や ラジ オ ボ タ ン ) を 選択 され て いる 
状態 (オン ) に し ます 。 


if(document.ga7g/o777.98 ね eg.options[0].selected == true) { 
alert( "確認 し て くだ さい "): 


セレ クト メニ ュー 名 dataMenu の 1 番目 の 項目 が 選択 され た 場合 、「 確 認 し て くだ さい 」 と いう ダイ 
アロ グ を 表示 し ます 。 











ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 O O O 〇 O 〇 O O (9 


| | フォ ー ム の 部 品 を 参照 し た い ・・・・・・・・・・…・ P108 
ロ どの 項目 が 選択 され て いる か を 調べ た い ・・・・・ P112 


選択 の 初期 状態 を 調べ た い ーー P113 
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FORM.06 


文 。selectedIndex 


茹 野 プロ バテ ィ 





セレ クト メニ ュー で 選択 され て いる 項目 の 参照 番号 を 参照 し ます 。 最初 の メニ ュー 項目 の 参 
照 番 号 は 0 に な り ます 。 





ょ ブラ ウザ 対応 表 IE10 9 に Chrome Safari Opera iOS6 Android 
O O O O O O 9  @ O 
| | 凌 昭 フォ ー ム の 部 品 を 参照 し た い ・・…・…・ P108 フォ ー ム 操作 時 に 処理 を 行い た い ・・・・…・…・ P138 
| 選択 され て いる か どう か を 調べ た い ・・・・・ P111 【SAMPLE】 フ ォ ー ム の 部 品 を 参照 する ・・・・・・ P122 
選択 の 初期 状態 を 調べ た い ーー P113 
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を .defaultChecked 初期 チェ ッ ク 状 朋 を 参照 
$.0ptions[ 参 照 番号 ] .efaultSelected] 家 態 を 


茹 語 』 プロ バテ ィ 


チェ ッ ク ボ ックス や ラジ オ ボ タ ン 、 セ レク トメ ニュ ー の メニ ュー 項目 の 初期 状態 を 参照 / 設 
定 す る プロ パテ ィ で す 。 


defaultChecked プ ロ パ ティ 
チェ ッ ク ボ ックス や ラジ オ ボ タ ン の 初期 の 選択 状態 を 参照 し ます 。 選 択 さ れ て いる 場合 は 
true、 さ れ て いな い 場 合 は false を 返し ます 。 


defaultSelected プ ロ パ ティ 
セレ クト メニ ュー の 初期 の 選択 状態 を 参照 し ます 。 選択 され て いる 場合 は trtue、 さ れ て い 
な い 場 合 は false を 返し ます 。 








ょ ブラ ウザ 対応 表 IE10 5 Chrome Safari Opera OS6 Android 
〇 O 〇 〇 〇 O O 〇 O 〇 O 〇 
| | 照 フォ ー ム の 部 品 を 参照 し た い ・・・・・・・・…・・ P108 フォ ー ム の 部 品 に 表示 され る テキ スト を 設定 し た い ・・P114 
ピ 衝 選択 され て いる か どう か を 調べ た い ・・・・・・ P111 
どの 項目 が 選択 され て いる か を 調べ た い ・・・・・ P112 
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い 














フォ ー ム の 部 品 に 表示 され る | 
テキ スト を 設定 し た い 


文 .value エレ メン ト の 文字 列 を 参照 / 設 定 
文 。defaultValue テキ スト エリ ア の 初期 文字 列 を 参 上 
太 .Options[ 参 照 番号 ] .t@Xt 計 が メニ ュー の 項目 を 参照 / 設 定 





友 ……Element オ ブ ジ ェクト (エレ メン ト 名 また は elements[ 参 照 番号 ]) 





プロ パテ ィ 








入力 欄 に 初期 状態 で 入力 され て いる 文字 列 や ボタ ン に 表示 する 文字 列 な ど を 参照 / 設 定 する 
プロ パテ ィ で す 。 
value プ ロ パ ティ 

入力 欄 に 入力 され て いる 文字 列 や ボタ ン に 表示 する 文字 列 な どの 各 エ レ メ ン ト の 値 を 参照 
設定 し ます 。 
defaultValue プ ロ パ ティ 

textarea 要 素 (<textarea> タ グ ) の テキ スト エリ ア に 初期 状態 で 入力 され て いる 文字 列 を 参 
照 し ます 。 
text プ ロ パ ティ 

セレ クト メニ ュー の option 要 素 (<option> タ グ ) で 設定 され る 値 を 参照 また は 設定 し ます 。 





if(document.e79/o/777.mailLvalue == "") alert(" メ ー ル アド レス を 入力 し て くだ さい ") 
エレ メン ト 名 mail の 値 が 「"」( 空 ) の 場合 、「 メ ー ル アド レス を 入力 し て くだ さい 」 と ダイ アロ グ に 表 
示し ます 。 
alert(document.e7g/o7777.cOomment.defaultValue): 
エレ メン ト 名 comment に 初期 状態 で 入力 され て いる 文字 列 を ダイ アロ グ に 表示 し ます 。 
document.e7g/o7777.e79e7/.options[0].text = "quality": 
セレ クト メニ ュー 名 enqMenu の 1 番目 の 選択 項目 の 値 を quality に 設定 し ます 。 











p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O O ⑩ 〇 〇 O 〇 O 〇 
| フォ ー ム の 部 品 を 参照 し た い -・・・・ーー・ P108 
、 参 昌 の ーー 
【SAMPLE】 フ ォ ー ム の 部 品 を 参照 する ・‥・・・ P122 
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FORM.09 


自動 的 に フォ ー カ ス を 移動 させ た い 


文 .cick() クリ ッ ク す る 

文 .blur() フォ ー カ ス を 外す 
文 .focus( ) フォ ー カ ス を 合わ せる 
文 .select() 文字 を 選択 状態 する 





娘 ……Element オ ブ ジ ェクト (エレ メン ト 名 また は elements[ 参 照 番号 ]) 








謀 て 削 玩 テ JNI の XS0 症 部 叶 き トーS 








| 

メソ ッ ド | 
N 

ボタ ン の クリ ッ ク 、 フ ォ ー カ ス の 移動 、 入 力 欄 の 文字 列 の 選択 な ど を 自動 的 に 行う メソ ッ ド | 9 

で す 。select メ ソ ッ ド で 文字 を 選択 する に は 、 あ ら か じ め 対 象 と する フォ ー ム や 入力 フィ ー ル 自 
ド テ キス ト エ リア 内 に focus メ ソ ッ ド で フォ ー カ ス を 合わ せ て お く 必 要 が あり ます 。 軸 
に 
ラ 
document.7/777. の 777.click(): | ィ 
フォ ー ム 名 form1 の エレ メン ト 名 btn1 を 自動 的 に クリ ッ ク し ます 。 1 カ 
ス 
document.forms [0].elements[0].blur(): | を 
1 番目 の フォ ー ム の 1 番目 の エレ メン ト の フォ ー カ ス を 外し ます 。 | 人 
document.7o/777.77cK7ag/7e.focus(): 和 
フォ ー ム 名 form1 の エレ メン ト 名 nickname に フォ ー カ ス を 合わ せま す 。 | た 
| の 
い 

document.7o/777.77c7g77e.Select(): | 

フォ ー ム 名 form1 の エレ メン ト 名 nickname の 文字 列 を 選択 状態 に し ます 。 ビ 





ょ ブラ ウザ 対応 表 IE10 IE9 3 Fx Chrome Safari Opera iOS6 Android 
O 〇 O O 〇 O 〇 〇 〇 〇 





参照 フォ ー ム の 部 品 を 参照 し た い ・・・・・…・ P108 
ロ フォ ー カ ス の 移動 時 に 処理 を 行い た い ・・・・・・ P132 


【5SAMPLE】 フ ォ ー ム の 部 品 を 参照 する ・-・・・・ P122 
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IFORV10_=。S。。 2 


数 値 入力 フィ ー ル ド と 
- スラ イダ ー を 操作 し た い 


文 。maX 入力 で きる 最大 人 
| 文 。min 入力 で きる 最小 値 
文 .Step 値 を 増減 させ る 際 の 最小 単位 
文 .StepUp() step の 値 X 引 数 $ だ け 値 を 増加 させ る 


文 stepDown ($) step の 値 X 引 数 $ だ け 値 を 減少 させ る 





到 ……type 属 性 に "number" ま た "range" が 設定 され た input 要 素 
人 …… 何 ステ ッ プ 分 だ け 値 を 増減 させ る か を 指定 する 数 値 。 省 略 時 は 1 。 








本 5 メソ ッ ド 





テー ミト! 


HTML5 で は 入力 フォ ー ム の input 要 素 が 拡張 され 、 フ ィ ー ル ド の 種類 (type) が 追加 され ま 
し た 。 


type 属 性 に "number" を 設定 する と 、 そ の 入力 フィ ー ル ド は 数 値 入力 専用 に な り 、 グ ラフ ィ 
カル な 表示 を 行う ブラ ウザ で は 、 フ ィ ー ル ド に 数 値 を 上 下さ せる ボタ ン か 入力 補助 と し て 表示 
され ます 。 ま た 、"range" を 設定 する と 、 そ の 入力 フィ ー ル ド は スラ イタ ダー 形式 で の 数 値 入力 
フィ ー ル ド に な り 、 つ まみ を 動か し て 値 を 増減 で きる よう に な り ま す 。 


min で 入力 で きる 最小 値 、max で 入力 で きる 最大 値 、step で 値 の 増減 の 最小 単位 を 指定 し 


ます 。 ス ライ ダー の 場合 、 max が ちょ うど 右端 の 位置 に 相当 し 、step の 単位 で し か スラ イダ 
ー の つま み を 動か せな く な り ま す 。 
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数 値 フ ィ ー ル ド の 矢印 ボタ ン や スラ イダ ー で の 値 の 増減 と 同じ よう に 、 メ ソ ッ ド を 使っ て も 
値 を 増減 で きま す (value 属 性 へ の 代入 も 従来 と 同じ く 使 用 可能 で す )。 


stepUp( 金 ) メ ソ ッ ド 
step 属 性 の 値 X 引 数 先 の 分 だ け 値 を 増加 させ ます 。 た と えば step が 2 で 引数 多 が 3 な ら 値 が 
6 増加 し ます 。 


stepDown( 金 ) メ ソ ッ ド 
step 属 性 の 値 X 引 数 先 の 分 だ け 値 を 減少 させ ます 。 た と えば step が 2 で 引数 移 が 3 な ら 値 が 
6 減少 し ます 。 


document.getElementById( "77ya7ge ").stepUp(10) 
myRange と いう スラ イダ ー の 値 を 10 ス テッ プ 分 増加 させ ます 。 





p ブラ ウザ 対応 表 IE10 1 1:) Fx Chrome Safari Opera iOS6 Android 


O O O O 〇 O 〇 O O 〇 
| 柏 。 ファ ー ム の 癌 を 参照 し た い 
朋 江 株 フー ム 近 に 和 叶 を 行い た い ・ 
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ーw ぬ NII て テー ヘン 南 問 
1 





で 語 薄 Qt 


ー 
ン 














入力 制限 を し た い 


文 .reduired 必須 チェ ッ ク を 行う か どう か 

文 .Dattern カチ ェ ッ ク に 使用 する 正規 

文 .validity 入力 チェ ッ ク 状 態 を 表す オブ ジェ クト を 格納 

文 .validationMessaqe 入力 チェ ッ ク 結果 の メッ セー ジ 。 読了 用 

文 .WilLValidate 入力 チェ ッ ク の 対象 に する か どう か 

文 .checkVaiidity() 入力 チェ ッ ク を 明 朱 的 に 行い 、 成功 な ら trUe を 返す 


娘 .setCust0mValidity( 多 ) カス タム 2 ウエ ラー を 委 定 する 


大 ……]nDut 要 素 
人 …… カ スタ ム エ ラ ー メ ッ セ ー ジ 








馬 皇 還 メソ ッ ド 





HTML5 で は javaScript に よる 複雑 な コー ディ ング 抜き で 入力 チェ ッ ク ・ 入 力 制限 を 行う こ 
と が で きる よう に な り ま し た 。 


すでに 触れ た "number'( 数 値 )、"range"( 数 値 ス ライ ダー) の ほか に 、"email'( メ ー ル アド レ 
ス )、"url'(URL)、"search"( 検 索 語句 )、"tel'( 電 話 番号 ) と いっ た type 属 性 が input 要 素 に 追加 
され 、 そ れ ぞ れ の 種別 に 応じ た 入力 補助 と 入力 制限 を 行っ て くれ ます 。 


多く の ケー ス で は 適切 な type 属 性 を 指定 する だ け で 十分 で す が 、 独 自 に 細か い 入力 チェ ッ 
ク の 制御 を 行う た め の プ ロ パ ティ や メソ ッ ド も 用 意 さ れ て いま す 。 


特定 の 入力 フィ ー ル ド を 必須 項目 に する に は 、required 属 性 を true に し ます 。 

text、search、tel、url、email の 各 フ ィ ー ル ド の 入力 内 容 を 正規 表現 に よっ て 制限 する こ 
と も で きま す 。 そ の 場合 に は 、pattern 属 性 に 文字 列 で 正規 表現 を 指定 し ます 。 こ の と き 、 部 
分 で は な くそ の フィ ー ル ド の 入力 全体 に 対し て 正規 表現 と の 一 致 が チェック され ます 。 

各 入 力 フ ィ ー ル ド の 直近 の 検証 結果 は validity 属 性 で 取得 で きま す 。 validity 属 性 に 格納 さ 
れ て いる ValidityState オ ブ ジ ェクト は 以下 の 属性 を 持っ て いて 、 入 力 チ ェ ッ ク の 結果 を 知る 
こと が で きま す 。 エ ンタ ー キ ー や 送信 ボタ ン 押 下 時 だ け で な く 、 任意 の タイ ミン グ 人 入力 を 検 


118 | FORML11 


証し た いと き は 、checkValidity メ ソ ッ ド を 呼び 出し ます 。 


属性 名 ME 
ivalueMissinq itrue な ら ば 、 入力 が 空 の た め 、 必 須 チ ェ ッ ク 違 反 に な つて いま す 。 








patternMismatch 


itooLond 


ialid itrue な ら ば 、 入 力 チェ ッ ク は 成功 じ C い まず? 
検証 失敗 時 の メッ セー ジ は validationMessage で 取得 で きま す 。 こ れ は 読み 取り 専用 属性 
で す 。 


特定 の フィ ー ル ド を 検証 の 対象 か ら 外す に は willValidate 属 性 に false を セッ ト し ます 。 


独自 の ロジ ッ ク で 入力 チェ ッ ク を 行う に は 、 検 証 失敗 時 に 、 独 自 の エエ ラー メッセー ジ 多 を 
setCustomValidity($) メ ソ ッ ド を 使っ て セッ ト し ます 。 金 が 空 文 字 で な けれ ば 、 そ の フィ ー 
ルド は チェ ッ ク に 失敗 し た も の と みな され 、 上 記 の validity メ ソ ッ ド で も customError が true 
に な り ま す 。 


ex77p/7.Onchange = function(ev){ 
if(fex7pg を value != "ok"){ 
ex7p/ た setCustomValidity("not ok!"): 
} else { 
ex が pg た setCustomVaiidity(""): 


} 
} 


type が text の input 要 素 textinput に カス タム の 入力 チェ ッ ク を 追加 し て いま す 。 
ここ で は 値 が ok で は な い 場 合 に カス タム エラ ー と し て 検証 を 失敗 させ て いま す 。 





p ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 


O O O 〇 O O O O 〇 O 
3 照 フォ ー ム の 部 品 を 参照 し た い ・…・・・・ P108 
ロ フォ ー ム 操作 時 に 処理 を 行い た い ・・・・・・・・ P138 
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四 謀 FORM.SAMPLE-01 | 


)。 フォ ー ム の 送信 先 や | 
」 送信 方 法 を 設定 する 





送信 先 を 変更 する サン プル で す 。 [送信 ] ボ タン が クリ ッ ク さ れ た と き (onsubmit イ ベン ト )、 
| sendForm 関 数 を 呼び 出し て ラジ オ ボ タ ン の チェ ッ ク さ れ て いる 項目 に し た が っ て action プ 
+ 口 パ ティ を 変更 し 、 送 信 先 を 変更 し て いま す 。 ま た 、 ラ ジオ ボタ ン の チェ ッ ク が [感想 ] だ っ た 
合 の み target プ ロ パ ティ で blank を 設定 し て 別 ウ ィ ン ド ウ で 表示 させ ます 。 


| JavaScriPCt  " 。 RE 
// フ ォ ー ム の 送信 先 を 変更 する 関数 
function se7g/o/77(){ 
Var が /777e77 = document.getElementById("form1"): 
7/77Z7e77.method = "get": // 送 信 形 式 を 設定 
7777E/e77.encoding = "application/x-www-form-urlencoded": 
// エ ンコ ー ド 方 式 を 決定 


2 7/77E/e/7.target = "の: 
ム // ラ ジオ ボタ ン 「 感 想 」 選 択 時 の 処理 
if(/77/e77./g7o1[0].checked == true){ 
Var /e5 = Confirm( "送信 内 容 は ご 感想 で よろ し いで すか ? 『): 
| if(/es == true){ 
| 7/77f/e77.action = "/cgi-bin/form_action.cgi?id=0": // 送 信 先 を 設定 
| 7/77/e/7.target = "blank": 
}else{ 
return false: 
] } 


} 


// ラ ジオ ボタ ン 「 質 問 」 選 択 時 の 処理 
if(/7/e7./g7o1[1].checked == true){ 

生ま Var /es = confirm(" 送 信 内 容 は ご 質問 で よろ し いで すか ? "): 
| f(/es == true){ 

| 7/77E/e77.action = "/cgi-bin/form_action.cgi?id=1": // 送 信 先 を 設 2 
| }elset 

return false: 


} 





} 
} 
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<body> 


<form action="" 1d="767777" onsubmit="return sendForm () "> 
<D テ > 


<input type="radio" name="7g の 7o7" /> 質 問 
</D> 
<p><textarea name="text" cols="30" rows="5"></textarea></D> 
<D> 
<input tVpe="submit" value=" 送 信 " /> 
<input tyDe="reset" value=" ク リア " /> 
</P> 
</form> 
</bodV> 


@f 






































ボタ ン の チェ ッ ク に よっ て 送信 先 を 変更 し ます 


I 参照 CLOSGC nm:4RtiAp P106 target プロ パテ ィ 
IT encoding プロ パテ ィ ・・・・ yanrssP106 


method プロ パテ ィ ー ド ーー P106 
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it 斑 定 記さ 時 宮 府 テ ー\ コ 


和 


の ひい 合 














lo | 


ーーー 
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フォ ー ム の 部 品 を 参照 する 





フォ ー ム の 空欄 を チェ ッ ク す る 関数 で す 。 [送信 ] ボ タン が クリ ッ ク さ れ た と き (onsubmit イ 
ベン ト ) に 関数 check を 呼び 出し 、 フ ォ ー ム 内 の 全 エ レ メ ン ト の 入力 を 確認 し ます 。 エ レ メ ン 
ト の タイ プ が text で あり 、 か つ 未 入力 で ある エレ メン ト が 存在 する 場合 、 警 告 ダイ アロ グ を 表 
示し て false を 返し ます 。 

※onsubmit イ ベン ト で 呼び 出さ れ た 関数 で false が 返さ れ た 場合 は フォ ー ム の 内 容 は 送信 し ま 
せん 。 


// フ ォ ー ム 内 の 未 入力 を チェ ッ ク す る 関数 
function c7eck り { 
Var 7/777e/7 = document.getElementById("7o/77"): 
for( =0 : i<7/77E/e7.length : j++ ){ // フ ォ ー ム 内 の エレ メン ト の 数 だ け 繰 り 返し 
/ エ レ メ ン ト の タイ プ が "text"、 か つ 未 入力 の 場合 
守 ((7p//e7.elements[i].type == "text") && (777Z7e77.elements[i]. 
Value == "")){ 


alert( "すべて の 欄 に 入力 し て くだ さい "): 
return false: //false を 返す 


} 


} 


return true: // す べ て の 項目 を 入力 し た ら true を 返す 


} 








<bodV> 
<form action="sample.cgi" id=" の 7777" method="post" onsubmit="return 
check() "> 
<P> 名 前 : <1nput type="text" name="7a77e" size="28" /></p> 
<P> 年齢: <input type="text" name="age" size="4" /></p> 
<P> 住 所 : <input type="text" name="add" size="48" /></p> 
<P> 電 話 : <input type="text" name="7e/" size="18" /></p><hr /> 
<D> 
<input type="submit" value=" 送 信 " /> 
<input type="reset" value=" ク リア " /> 
</P> 
</form> 
</bodV> 
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と き に 入力 欄 に 空欄 が あれ ば 、 警 告 ダ イア ログ が 表示 され 、 送 信 が 行わ 





[送信 ] ボ タン を クリ ッ ク し た 
れ ま せん 


selectedIndex プロ パテ ィ 
value メソ ッ ド ・…・ や 
OU に mot HARA2E つ 32 | 
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CN 
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選択 され て いる 項目 を 調べ る | 
EE 


セレ クト ボッ クス の 選択 項目 を 調べ 、 選 択 項目 に よっ て 処理 を 分 ける サン プル で す 。「 希 望 し 
な い 」 選 択 時 は メー ル ア ド レス 入力 用 の テキ スト ボッ クス と [確認 ] ボ タン が 無効 状態 に な り ま 
す 。「 希 望 す る 」 を 選択 時 は テキ スト ボッ クス と [確認 ] ボ タン が 有効 状態 に な り ま す 。 

[確認 ボタ ン が クリ ッ ク さ れる と 、 テ キス ト ボ ックス の 未 入 力 チ ェ ッ ク 、 メー ル ア ド レス で 
ある か を チェ ッ ク し 、 ダ イア ログ を 表示 し ます 。 ダ イア ログ 表示 後 、 メ ー ル アド レス が 正しく 
な いも し く は 未 入力 の 場合 は テキ スト ボッ クス に フォ ー カ ス を 移し ます 。 入 力 され た 文字 列 が 
ある 場合 は 選択 状態 と な り ま す 。 





Var 7ex/E/e/7: 
// セ レク ト ボ ックス の 選択 項目 に よっ て テキ スト ポッ クス の 有効 ・ 無 効 を 切り 替え る 関数 


function changeSelect(){ 
ex7E/e/7 = document.qetElementById("zex7"): 
Var の 77/e/7 = document.getElementById(" の 7o7"): 
if(document.getElementById("se/ecf").selectedIndex == 0){ 
// 選 択 項目 を イン デック ス で 判別 
//「 希 望 し な い 」 選 択 時 の 処理 
7ex7/e/7.Value = "": //value 値 を 空 に する 


7ex/Z/e/7.disabled = true: // テ キス ト ボ ックス を 無効 に する 
7e/7.disabled = true: // ボ タン を 無効 に する 
}else{ 


//「 希 望 する 」 選 択 時 の 処理 
7ex7E/e/7.disabled = false: // テ キス ト ボ ポッ クス を 有効 に する 
77/e/7.disabled = false: // ボ タン を 有効 に する 
} 
} 


//「 確 認 」 ボ タン を クリ ッ ク し た と き の 処 理 の 関数 
function c/7cg/ が 7o7(){ 
//「 希 望 する 」 を 選択 し て いる 場合 の み 行 う 処 理 
if(exZE/e77.disabled == false){ 
if(Zex7E/e/7.Value == ""){ // 未 入力 の 場合 
alert(" メ ー ル アド レス を 入力 し て 下さ い 。『"): 
ex7/e/7.focus(): // フ ォ ー カ ス を 合わ せる 
}else if(zex7E/e77.value.index0f("@",0)<0){ 


入力 され 


alert(" メ ー ル アド レス を 正確 に 入力 し て 下さ い 。 "): 


列 に 「@」 が な い 場 合 


字 
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ex7//e/7.focus(): 

ex7Z/e/7.Select(): // 入 力 さ れ た 文字 列 を 選択 状態 に する 
}elset 

alert(" メ ー ル アド レス で す 。 『): 





<bodV> 
<form action="" 1d="7 の 7 イリ > 
<P> メ ー ル の 送信 を 希望 し ます か ? <br /> 
<select id="se/ecf" onchange="changeSelect() "> 
<option selected="selected"> 希 望 し な い </option> 
<option> 希 望 する </option> 
</select></p> 
<P> メ ー ル アド レス 入力 :<input type="text" id="zfexf" disabled="disabled" /> 
<input type="button" id=" の 7 が が o7" value=" 確 認 " onclick="clickButton()" 
disabled="disabled" /> </p> 
</form> 
</bodV> 










Internet Exp 









を 


メー ル の 送信 を 希望 し ます か ? 
| 天 望 し な い マ 













メー ル ア ド レス 入力 : 


⑩ セ レク ト ボ ックス の 選択 項目 で 「 希 望 し な い 」 選 択 時 は メー ル ア ド レス 入力 用 の テキ ス 
ト ポ ボッ クス 、[ 確 認 ] ポ タン が 無効 に な り ま す 


人 @- ) 較 rtp:/wweshoesha.oo 


メー ル の 送信 を 希望 と ます か ? 
希望 る マツ 





- ロ 対 弓 


















作 メー ル ア ド レス を 正確 に 入力 し て 下さ い 、 





メー ル ア ド レス 入力 】 








メー ル ア ド レス に 「@」 が 含ま れ て いな い 場 合 、 警 告 ダイ アロ グ が 表示 され ます 


上 E 朋 : 参 SIGD 本 522 クエ の (ROGER P108 
い length プロ パテ ィ Sn 了 


type プロ パテ ィ イィ ーーー ドド ドー 5 
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フォ ー ム の 内 容 を 送信 する 









JavaScript を 使っ て フォ ー ム の 内 容 を 送信 する サン プル で す 。 サ ンプ ル 「 フ ォ ー ム の 部 品 を 

、 参照 する 」 と 内 容 は ほぼ 同じ で す が 、 こ の サン プル で は <input type ="submit'/> で 作成 さ 
-+ れる 送信 ボタ ン の 機能 を submit メ ソ ッ ド で 実現 し て いま す 。 

な お 、 フ ォ ー ム に 入力 され た デー タ を 実際 に 送信 する に は 、 送 信 先 や 送信 方 法 を HTML/ 

XHTML ま た は javaScript を 利用 し て 別に 設定 し 、 ま た 送信 し た デー タ を 処理 する た め の CGil 





| な どの プロ グラ ム が 必要 で す 。 
] 
| EE 
| リオ ー ム 内 の 未 入力 を チェ ッ ク 4 
function c7ec ん り { 
Var 7o/77E/e77 = document.qetElementById("7/777"): 
for( 1=0 : i<7o/77E/e/7.length : な テ ){ // フ ォ ー ム 内 の エレ メン ト の 数 だ け 繰 り 返 し 
ォ if((formElem.elements[i].type == "text") && (777E/e77.elements[ 刀 . 
| Value == "")){ // エ レ メ ン ト の タイ プ が "text"、 か つ 未 入力 の 場合 
ka alert(" す べ て の 欄 に 入力 し て くだ さい "): 
return: 
} 
| 76/77/e77.Submit(): // 未 入力 が な けれ ば 送信 する 
指 語 } 
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<body> 
<form action="submit.html" id="/777" method="post"> 


<D テ > 

名 前 : <input type="text" name="7g/7e" si1ze="28" /> 

年 齢 : <1nput type="text" name="age" size="4" /> 

</D> 

<P> 住 所 : <1nput type="text" name="a7" size="48" /></D> 
<P> 電 話 : <1nput type="text" name="7e/" size="18" /></D> 
<hr/> 


<D> 
<input type="button" value=" 送 信 " onclick="check()" /> 
<input type="button" value=" ク リア "onclick="reset()" /> 
</D> 
</form> 
</bodV> 
































人 @ )|g httpy/ www shoeisha.co の ・ 時 で | 氏 オー ム の 内 容 を 送信 する ※ 吊 el 
| 名 前 : 開 ※ 太郎 年 齢 : 

| 住所 : 

] 











に 





| | 
章 人 


上 EE: 多 91220 ん 74 に た に こわ に P110 
ー HCS SRSk 注 alone は は P110 
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紋 結 9 テー 


の 表記 
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EVENTO1 SS 2 
読み 込み 時 や 移動 時 に 処理 を 行い た い 


onload = 文 ペー ジ の 読み 込み 時 
onunload = 雄 ペー ジ の 切り 替え 時 





友 …… 実 行 する 命令 (関数 や 関数 名 ) 





馬 玉生 イベ ント 





ペー ジ の 内 容 が 完全 に 読み 込ま れ た と き や ペ ー ジ の 切り 替え 時 に 処理 を 実行 し た 場合 に 使 
用 し ます 。 


onload イ ベン ト 
ペー ジ や 画像 な ど デ ー タ の 読み 込み が 完了 し た と き に 発生 する イベ ント で す 。 読み 込み 完了 
と 同時 に 何ら か の 処理 を 行い た い 場 合 に 使用 し ます 。 


onunload イ ベン ト 
他 の ペー ジ に 移動 する と き に 発生 する イベ ント で す 。 


<body onload=" が er7=setTimeout(77sg', 3000) "> 
タイ マー を 設定 し 、 そ の 識別 子 を timer1 に 代入 し ます 。 ペ ー ジ の 読み 込み が 完了 し た ら 、3 秒 お 
き に 関数 msg を 呼び 出し ます 。 


document.77ages[0].onload = 太 sg: 
1 番目 の 画像 の 読み 込み が 完了 し た ら 、 関数 msg を 呼び 出し ます 。 


<body onunload="alert(' ま た ね 1)"> 
他 の ペー ジ に 移動 する と き に 、「 ま た ね ! 」 こ と いう ダイ アロ グ を 表示 し ます 。 
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に 1 
に 
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ご ご NGt 骨 宮 和 時 S る 下顎 


Column Event オ ブ ジ ェクト 


Event は マウ ス や キー の 状態 な ど を あら わす オブ ジェ クト で す 。 イ ベン ト を 取得 し た り 、 発 生 し 
た イベ ント を 参照 で きま す 。 

Internet Explorer で は 、Event オ ブ ジ ェクト を Window オ ブ ジ ェクト の event プ ロ パ ティ で 扱 
うこ と が で きま す 。 一 方 、Firefox や Netscape、Opera で は 、HTML/XHTML の on~ 形 式 の イベ 
ント ハン ドラ の 内 部 で の み イ ベン ト オ ブ ジェ クト が 利用 で きる た め 、 関 数 の 引数 と し て Event オ ブ 
ジェ クト を 渡す の が 一 般 的 で す 。 

た と えば 以下 の よう な 形跡 で 指定 し ます 。 


層 


onclick=" 関 数 名 (event)" 


onclick= ニ presskey の よう に メソ ッ ド を 関数 で 置き 換え る と き は 引数 と し て 渡さ れ ま す 。 








ょ ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android | 





〇 〇 〇 O 〇 O 〇 〇 〇 〇 〇 | る 
読み 込み の 完了 を 調べ | ン 
上 参照 MR 人 ーー P148 | ト 
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BRNIE ツ 玉 議 議 議 詳 議 詳 語 。〔 ハ プペ ※ み 上 ソ 〇 〕] 


画像 が 読み 込め な いと き に 
処理 を 行い た い 


Onabort = 座 画 際 の 読み 込み 中 新 時 | 
OnerrOor= 雄 画像 の 読み 込み 失敗 時 | 


丸 …… 実 行 する 命令 (関数 や 関数 名 ) 








茹 明 還 イベ ント 





画像 が 読み 込め な い 場 合 に 発生 する イベ ント で す 。 読み 込め な い 画 像 の 有無 を 調べ た り 、 そ 
の 場合 の 処理 を 設定 し た りす る 際 に 使用 し ます 。 


onabort イ ベン ト 
画像 の 読み 込み が 中 断 さ れ た と き に 発生 する イベ ント で す 。 必ず 画像 を 表示 させ た い 場 合 な 
ど に 読み 込み が 中 断 さ れ た タイ ミン グ で 警告 メッ セー ジ を 表示 で きま す 。 


onerror イ ベン ト 


画像 ファ イル が 見 つか ら な いな どの 理由 で 画像 が 表示 で き な い 場合 に 発生 する イベ ント で す 。 


document.77a9es[0].onabort =retry : 
1 番目 の 画像 の 読み 込み が 中 断 さ れ た 際 、 関 数 retry を 呼び 出し ます 。 


<img src="sample.jpg" alt="" onerror="alert(' 表 示 で きま せん 。 !)" /> 
画像 の 読み 込み に 失敗 し た 際 、「 表 示 で きま せん 。」 と ダイ アロ グ を 表示 し ます 。 








ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 O 〇 O O 〇 〇 【@) 〇 


| 参照 画像 の 読み 込み の 完了 を 調べ た い ・・・・…・・・・ P224 
u 【SAMPLE】 読 み 込み 時 に 処理 を 行う ・・‥・・・ P148 
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| EVENT03 So 2 還 還 還 還 還 還 還 
サイ ズ 変 更 時 に 処理 を 行い た い 


Onres1Ze = 文 


娘 …… 実 行 する 命令 (関数 や 関数 名 ) 








茹 皇 還 イベ ント 





オブ ジェ クト の サイ ズ が 変更 され た と き に 発生 する イベ ント で す 。 サ イズ が 変更 され た と き 
に 処理 を 実行 し た い 場 合 に 使用 し ます 。 ウィンド ウ や フレ ー ム で 利用 で きま す 。 


<body onresize="alert(' リ サイ ズ さ れ ま し た ') "> 


ウィ ンド ウ の サイ ズ が 変更 され た と き に 、 ダ イア ログ に 「 リ サイ ズ さ れ ま し た 」 と 表示 し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 中:) Fx Chrome Safari Opera iOS6 Android 
O O 〇 O O O O O O O 


| 参照 ウィ ンド ウ の サイ ズ を 変更 し た い …・・ P080 
ロ 【SAMPLE】 フォ ー カ ス の 移動 時 に 処理 を 行う ・・P136 
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多 
|EVENTO4 = "=5S 。 EE 


フォ ー カ ス の 移動 時 に 処理 を 行い た い 


0nfOCUS = 充 フォー カス が 合っ た と き 
| onblur = 文 フォ ー カ ス が 苑 れ た と き 


…… 実 行 する 命令 (関数 や 関数 名 ) 








馬 皇 還 イベ ント 





マウ スカ ー ソ ル や [Tab] キ ー に よっ て フォ ー カ ス が 移動 し た と き に 発生 する イベ ント で す 。 
ウィ ンド ウ や フレ ー ム 、 フ ォ ー ム の 要素 に 設定 で きま す 。 


| onfocus イ ベン ト 
フォ ー カ ス が 合っ た と き に 発生 する イベ ント で す 。 


onblur イ ベン ト 
フォ ー カ ス が 離れ た と き に 発生 する イベ ント で す 。 


いとこ 


<body onfocus="77s9 の "> 
ドキ ュ メ ント 内 に フォ ー カ ス が 合っ た と き 、 関 数 msg() を 実行 し ます 。 


document.7o/777.e/e77e7 な [0].onblur = check: 
form1 の 最初 の エレ メン ト か ら フ ォ ー カ ス が 離れ た と き 、 関 数 check を 呼び 出し ます 。 





<input type="text" name="mail " size="40" onfocus="yFg7c7 7 
onblur= "77y77c2 り "> 

| 入力 フィ ー ル ド が フォ ー カ ス さ れ た ら 関 数 myFunc1()、 入 力 フィ ー ル ド か ら フ ォ ー カ ス が 離れ た 
ら 関 数 myFunc2() を 呼び 出し ます 。 





ぁ ブラ ウザ 対応 表 IE10 1 ギ ) 13】 Fx Chrome Safari Opera iOS6 Android 
O O O O 〇 O O O O 


| 参照 自動 的 に フォ ー カ ス を 移動 させ た い ・ ー P115 
ピカ 【SAMPLE】 フォー カス の 移動 時 に 処理 を 行う -・P136 
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BNIEE 環 呈 証 議 議 議 証 語 昌 =-' .… 
マウ ス オ ー バ ー 時 に 処理 を 行い た い 


0nIm0OUSeOVeT = 衣 。。 マウ ス オ ー バ ー 時 
Onm0OUSeOout = 文 マウ スカ ー ソ ル が 離れ た と き 


文 …… 実 行 する 命令 (関数 や 関数 名 ) 








イベ ント 





マウ スカ ー ソ ル が オブ ジェ クト 上 に 重なっ た と き 、 ま た は オブ ジェ クト か ら 離 れ た と き に 発 
生 す る イベ ント で す 。 ペ ー ジ 上 の ほとん どの 要素 に 利用 する こと が で きま す 。 


onmouseover イ ベン ト 
オブ ジェ クト 上 に マウ スカ ー ソ ル が 重なっ た と き に 発生 する イベ ント で す 。 


onmouseout イ ベン ト 
オブ ジェ クト か ら マ ウス カー ソル が 外れ た と き に 発生 する イベ ント で す 。 


<a href="javascript:void(0) "onmouseover=" の ove7 り "> 
リン ク 上 に マウ スカ ー ソ ル が 重なっ た ら 、 関 数 mover() を 呼び 出し ます 。 


document./77s[0].onmouseout = /759: 
最初 の リン ク か ら マ ウス カー ソル が 離れ た ら 、 関 数 msg を 呼び 出し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 1 Fx Chrome Safari Opera iOS6 Android 
O ⑨, O O O O O O (@⑯) 


| 参 照 マウ スク リッ ク 時 に 処理 を 行い た い ・・・・・・・ P134 
ロ n キー 操作 に よっ て 処理 を 行い た い ・・・-・・・・・・ P139 


【SAMPLE】 マ ウス 操作 時 に 処理 を 行う ・・・・P138 
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IEVENT06 =。。。 = 5 還 還 還 還 還 E 
マウ スク リッ ク 時 に 処理 を 行い た い 





onclick = 友 マウ スク リッ ク 時 
ondblclick = 雄 マウ スタ ブル クリ ッ ク 時 
onmousedown = 文 マウ スタ ダウ ン 時 
OnmouSeuD = 太 マウ ス アッ プ 時 





太 …… 実 行 する 命令 (関数 ) 





イベ ント | 
el 


マウ ス の ボタ ン が クリ ッ ク さ れ た と き に 発生 する イベ ント で す 。 ペー ジ 上 の ほとん どの 要素 
で 利用 で きま す 。 
onclick イ ベン ト 

マウ ス が クリ ッ ク さ れ た と き に 発生 する イベ ント で す 。 発生 の タイ ミン グ は onmouseup イ 
ベン ト と 同じ で す 。 
ondblclick イ ベン ト 

マウ ス の ボタ ン が ダブ ルク リッ ク さ れ た と き に 発生 する イベ ント で す 。 
onmousedown イ ベン ト 

マウ ス の ボタ ン が クリ ッ ク さ れ た と き に 発生 する イベ ント で す 。 
onmouseup イ ベン ト 

マウ ス の ボタ ン が 離さ れ た と き に 発生 する イベ ント で す 。 


<input type="button" value="OK" onclick="77yfu7c()" /> 
ボタ ン が クリ ッ ク さ れ た ら 関 数 myFunc() を 呼び 出し ます 。 
<a href="javascript:void(0)" onmousedown="a/erf(' は ずれ ) "> 


リン ク 部 分 で マウ ス の ボタ ン が クリ ッ ク さ れ た ら 、 ダ イア ログ に 「 は ずれ 」 と 表示 し ます 。 
document./777797.0nmouseuD = 77M//7Cz 
画像 名 myImg1 上 で マウ ス の ボタ ン が 離れ た ら 、 関 数 myFunc を 呼び 出し ます 。 





> ブラ ウザ 対応 表 IE10 1 コリ 1 ゴ :) Fx Chrome Safari Opera iOS6 Android 


(の 〇 〇 〇 〇 O 〇 く いじ 3 





照 マウ ス オ ー バ ー 時 に 処理 を 行い た い ・・…・・・・ P133 
マム キー 操作 に よっ て 処理 を 行い た い ・・・・・ ・P139 
【SAMPLE】 マ ウス 操作 時 に 処理 を 行う ・‥・・・- P138 
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|EVENTO07 = = 人 還 還 還 還 還 還 還 還 還 還 


コン テキ スト メニ ュー を | 
表示 させ な いよ うに し た い | 


oncontextmenu = 太 コン テキ スト メニ ュー 表示 時 


到 …… 実 行 する 命令 (関数 や 関数 名 ) 








イベ ント 





マウ ス の 右 ボ タン が クリ ッ ク さ れ た と き ( コ ン テ キ スト メニ ュー が 表示 され る 前 ) に 発生 する 
イベ ント で す 。 こ の イベ ント か ら の 戻り 値 を false に する と 、 マ ウス を 右 ク リッ ク し た 際 に 表 
示さ れる コン テキ スト メニ ュー を 表示 し ませ ん 。 


<body oncontextmenu="return false"> 
コン テキ スト メニ ュー を 表示 し ませ ん 。 





ょ ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O O O O 〇 O O 〇 O メ X 


照 【SAMPLE】 マ ウス 操作 時 に 処理 を 行う ・・・・・ P138 
参 l 
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IEVENT0B = や == = EE 


フォ ー ム の 送信 
リセ ッ ト 時 に 処理 を 行い た い 


Onsubmit = 太 フォ ー ム 送信 時 
OhreSet = 文 フォ ー ム リセ ッ ト 時 


…… 実 行 す る 命令 (関数 や 関数 名 ) 








馬 皇 』 イベ ント 





フォ ー ム が 送信 また は リセ ッ ト さ れ た と き に 発生 する イベ ント で す 。 実行 する 命令 の 戻り 値 
が false の 場合 は 送信 や リセ ッ ト を 行い ませ ん 。 


onsubmit イ ベン ト 
submit ボ タン が クリ ッ ク さ れ た と き に 発生 する イベ ント で す 。 


onreset イ ベン ト 
reset ボ タン が クリ ッ ク さ れ た と き に 発生 する イベ ント で す 。 


document./777.onsubmit = 太 /77C77ec: 
フォ ー ム が 送信 され た ら 関 数 formCheck を 呼び 出し ます 。 


<form onreset="return confirm(' リ セッ ト し ます か ?9)"> 
送信 ボタ ン が 押さ れ た と き に 確認 ダイ アロ グ を 表示 し ます 。[OK] ボ タン が 押さ れ た ら 送信 を 行 
い 、[ キ ャ ン セ ル ] ボ タン が 押さ れ た 場合 は 送信 を 行い ませ ん 。 
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Column 条件 に よっ て フォ ー ム の 送信 を 中 止 する 

フォ ー ム の 送信 を javaScript で 制御 する メリ ッ ト の 一 つ は 、 未 記入 の 項目 が ある と き 、 フ ォ ー ム | 
を 送信 し な いよ うに で きる こと で す 。 送信 し な いよ うに する に は 、onsubmit イ ベン ト の 処理 と し | 
て return ス テー トメ ント で false を 返す よう に し ます 。 

入力 の 確認 な ど を し て か ら フ ォ ー ム を 送信 させ た 場合 は return の 後に 関数 名 を 指定 し て 、 そ の 関 
数 の 中 で 入力 が 誤っ て いた ら false を 返す よう に し て くだ さい 。 た と えば 


function send_mail() { 
return false: 


} 
と いう false を 返す 関数 を 作成 し て 、<form> タ グ の onsubmit イ ベン ト を 


onsubmit="return send_mail()" 


の よう に 記述 する と 、 フ ォ ー ム を 送信 し ませ ん (常に false を 返し ます )。 


この 応用 と し て 以下 の よう に 記述 すれ ば 、text1 に 文字 列 が 入力 され て いる 場合 だ け 送信 で きる 
よう に な り ま す (document.form1 は this と 書き 換え る こと が で きま す )。 


せこ 人 胃 富 生 隙 テ は ご へ い 府 3 テー ミ 








( 
8 Ba 了 | い 
<form name="form1" action="/cgi-bin/test.cqg1" onsubmit="return document. | 
form1.text1.value != "> | 
<input type="text" name="text1" /> | L 
<input type="submit' value=" 送 信 " /> | 
</form> | 
| 
| 
| 
> ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android | ピッ 
〇 (CD O O 〇 O O 〇 〇 | べ 
| 参照 フォ ー ム の 内 容 を リセ ッ ト / 送 信 し た い ・……・P110 1 ン 
| ジ 衝 起 虹 (SAMPLE】 フォ ー ム 操作 時 に 処理 を 行う ・-・- P130 ト 
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INIEGE 議 議 議 議 計 証 ⑥ー… ペ 1 ハ あ あ あ ぴ ぴ ゾ ぴ ず ぞ べべ べべ 
フォ ー ム 操作 時 に 処理 を 行い た い 


onchande = 太 変更 時 
onselect = 文 入力 フィ ー ル ド 選 択 時 


大 …… 実 行 す る 命令 (関数 や 関数 名 ) 








茹 持 イベ ント 





セレ クト メニ ュー(select 要 素 ) や テキ スト 入力 フィ ー ル ド (textarea 要 素 、input 要 素 の 属 
性 が type='text' の 場合 ) な どの フォ ー ム の 部 品 の 状態 や 内 容 が 変化 し た と き に 発生 する イベ 
ント で す 。 


onchange イ ベン ト 

フォ ー ム の 部 品 の 状態 や 内 容 が 変更 され た と き に 発生 する イベ ント で す 。 select、 
textarea、input 要 素 (type="text" の 場合 ) な ど に 設定 する こと で 、 セ レク トメ ニュ ー の 選択 
項目 や テキ スト 入力 フィ ー ル ド の 文字 列 が 変更 され た と き に 発生 させ る こと が で きま す 。 


onselect イ ベン ト 
選択 時 に 発生 する イベ ント で す 。 textarea 要 素 、input type="'text" に 設定 する こと で 、 テ 
キス ト 入 力 欄 の 文字 列 が 選択 され た と き に 発生 させ る こと が で きま す 。 


<select onchange= "7o/() "> 


セレ クト メニ ュー の 項目 が 変更 され た ら 、 関 数 idou() を 呼び 出し ます 。 





document. め 7777.ex77.onselect = 7cz 
text1 の 文字 列 が 選択 され た ら 、 関 数 myFunc を 呼び 出し ます 。 








と ブラ ウサ 対応 表 IE1O IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
O O O 〇 〇 O O O O O 


3 照 どの 項目 が 選択 され て いる か を 調べ た い ・・・・・ P112 
上 【SAMPLE】 フォ ー ム 操作 時 に 処理 を 行う ・・・ P130 
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| EVENT10 = = 2 昌明 
| | す 
| | 
し レー ム 
キー 操作 に よっ て 処理 を 行い た い 旧 
| 時 
処 
onkeydown = 太 キー が 押さ れ た と き | 
onkeypress = 太 キー が 押さ れ て いる と き | 行 | 
onkeyup = 座 キー が 離さ れ た と き | い 
eS oo っ | い 
太 …… 実 行 する 命令 (関数 や 関数 名 ) | キ 
曽 叶 
イベ ント | 操 
回 
キー の 操作 状態 に よっ て 発生 する イベ ント で す 。 同じ オブ ジェ クト に 設定 し て いる 場合 は 、 よ 
onkeydown 一 onkeypress 一 onkeyup イ ベン ト の 順に 発生 し ます 。 ペ ー ジ 上 の ほとん どの 要 CE 
素 で 利用 可能 で す 。 な お 、 同 じ 操 作 で も ブラ ウザ の 種類 に よっ て 、 発 生 す る イベ ント の 種類 や 処 
発生 順序 が 異な る 場合 が あり ます 。 和 
onkeydown イ ベン ト | 行 
キー が 押さ れ た と き に 発生 する イベ ント で す 。 』 い 
onkeypress イ ベン ト こ 
キー が 押さ れ て いる 間 、 断 続 的 に 発生 する イベ ント で す 。 い 
onkeyup イ ベン ト 


キー が 押さ れ 、 そ の 後 、 離 され た と き に 発生 する イベ ント で す 。 


<body onkeydown="alert(' 呼 ん だ ? "> 
キー が 押さ れ た ら 、「 呼 ん だ ? 」 と いう ダイ アロ グ を 表示 し ます 。 


document.onkeVDress = ん り /@5s: し 
キー が 押さ れ て いる 間 、 関 数 kpress を 呼び 出し ます 。 








<a href="#" onkeyup=" ん gp"> 
キー が 離さ れ た ら 、 関 数 kup() を 呼び 出し ます 。 | 





> ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 O (⑧ 〇 O 〇 〇 O 〇 O 〇 


| 参照 マウ ス オ ー バ ー 時 に 処理 を 行い た い P133 
ジッ マウ スク リッ ク 時 に 処理 を 行い た い ・・・・・・・・ P134 


[SAMPLE] 押さ れ た キー の キー コー ド を 取得 する ・・ P156 
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IEVENT11  … 5 還 還 還 EE 


押さ れ た キー の 
_ キー コー ド を 取得 し た い 


文 .keVCOde キー コー ド を 上 





衣 ……Event オ ブ ジ ェクト 





プロ パテ ィ 





入力 され た キー の キー コー ド (文字 コー ド ) を 参照 し ます 。 キ ー コ ー ド か ら 文 字 列 を 取得 する 
に は 、String オ ブ ジ ェクト の fromCharCode メ ソ ッ ド (p.222) を 使用 し て くだ さい 。 


1 alert(event.keyCode): 


押さ れ た キー の キー コー ド を ダイ アロ グ に 表示 し ます 。 





テス ユ 


ブラ ウザ 対応 表 IE10 IE9 |:】 Fx Chrome Safari Opera iOS6 Android 


ィ へ へ へ と ハ 


〇 C C (の 人 0 O 〇 O O 〇 O 





| | イベ ント の 情報 を 取得 し た い ・………… P141 
ジー 文字 コー ド を 扱い た い …………・…ーーー・・P203 


【SAMPLE] 押さ れ た キー の キー コー ド を 取得 する ・ P156 
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BNIEL 駐 議 議 議 議 証 議題 昌 。 =" …〔《) ※ #、 
イベ ント の 情報 を 取得 し た い 


文 .tardet 
文 .tVDe 





文 ……Event オ ブ ジ ェクト 








プロ パテ ィ 





target プ ロ パ ティ 
画像 や フォ ー ム エレ メン ト な ど 、 イ ベン ト の 発生 元 と な る オブ ジェ クト を 返し ます 。 


type プ ロ パ ティ 
発生 し た イベ ント の 種類 を 参照 し ます 。 イ ベン ト の 種類 は イベ ント ハン ドラ 名 か ら 先 頭 の 
on を 削除 し た 部 分 の 文字 列 に な り ま す (click、mousedown な ど )。 


77 ル MEVe/77 = eVent.tVDe: 
イベ ント の 種類 を 変数 myEvent に 代入 し ます 。 

















p ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
target メ メ メ O O O 〇 O O ⑥ 
type OS 0 0 SN OS 
参照 押さ れ た キー の キー コー ド を 取得 し た い ・・・・・ P140 
ジム イベ ント が 発生 し た 位置 を 調べ た い ・・・・・…・ P128 
【SAMPLE】 イ ベン ト の 情報 を 取得 する ・-・・P158 
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押 | 
さ | 
板 
7 選 
の | 
1 
T 
ド 
を 
取 | 
則 | 
し 
た 
い 





で 敵対 慌 弟 通う テマ ス ユ 


Hg 





cu 





BNIEE 革 議 議 議 議 議 証 語 。〔 ひ ト ヘ 〔 パ }{ ガ ぞ 
イベ ント が 発生 し た 位置 を 調べ た い 























| 
| 文 。X マウ ス の x 座 標 を 参照 
| 文 .V マウ ス の 座標 を 参照 
| 文 。cientX マウ ス の 表示 領域 上 の x 座 標 を 参照 / 設 定 
| 文 。ciientY マウ ス の 表示 銀 域 上 の 座標 参照 設定 
文 。DadeX マウ ス の ベー ジ 上 の > 座標 を 参照 
- ュ | 護 。DpadgeY マウ ス の ページ 上 の 座標 参照 
文 。SCreenX マウ ス の 画面 上 の x 座 標 を 参照 
文 .SCreenY マウ ス の 画面 上 の y 座 標 を 参 昭 | 
1 衣 ……Event オ ブ ジ ェクト | 
本 皇 還 プロ パテ ィ | 








ペー ジ 上 お よび の 画面 上 に お ける 、 イ ベン ト 発 生 時 の マウ ス の 位置 を 調べ ます 。clientX と 
clientY プ ロ パ ティ で は ブラ ウザ の 表示 領域 の 左上 隅 か ら の 相対 座標 を 参照 / 設 定 す る の に 対 
し 、pageX と pageY プ ロ パ ティ で は 作成 され る ペー ジ 全 体 の 左上 隅 か ら の 相対 座標 を 参照 し 
ます 。 


に 
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レク 
alert(event.x +"/" + event.V): ZN 
イベ ント 発生 時 に お ける マウ ス の x 座 標 と y 座 標 を ダイ アロ グ に 表示 し ます 。 
8 
alert(event.clientX): 和 上 
イベ ント 発生 時 に お ける 、 表 示 領 域 上 の マウ ス の x 座 標 を ダイ アロ グ に 表示 し ます 。 生 
し 
cY = event.clientY: | た 
イベ ント 発生 時 に お ける 、 表 示 領 域 上 の マウ ス の y 座 標 を 変数 cCY に 代入 し ます 。 門 
県 
document.e/o/77.DX.Value = event.DaqeX: 四 | 
エレ メン ト 名 px の 値 を イベ ント 発生 時 に お ける マウ ス の ペー ジ 上 の x 座 標 と し ます 。 | べ 
た 
document.e/o/77py.Value = event.paqeY: い 
エレ メン ト 名 py の 値 を イベ ント 発生 時 に お ける マウ ス の ペー ジ 上 の y 座 標 と し ます 。 
5 メ = event.screenX: 
イベ ント 発生 時 に お ける マウ ス の 画面 上 の x 座 標 を 変数 sX に 代入 し ます 。 
f(event.screenY >= 250)7y77c(): 
イベ ント 発生 時 に お ける マウ ス の 画面 上 の y 座 標 が 250 ピ クセ ル 以 上 の 場合 、 関 数 myFunc() を 呼 ト 
び 出 し ます 。 
ょ ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera iOS6 Android 
X、V O 〇 O O メ メ 〇 O 〇 メ 
DadeX、DadeY メ メ メ O 〇 O O O 〇 = 
その 他 つい の 中 科 
イベ ント の 情報 を 取得 し た い ・・・・ ーー P14 ン 
参照 】 0 イベ ン ト 入 た し た 抽 隊 を 午 べ 5 E160 ト 
【SAMPLE】 マウ ス の 動き に 合わ せ て 画像 を 動か す ・・P162 = 
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フォ ー ム 操 作 時 に | 


0 


、 処理 を 行う | 


フォ ー ム で 選択 され た 内 容 に よっ て 自動 的 に 金額 を 計算 し 、 送 信 す る サン プル で す 。 フ ォ ー 
ム 上 で 「 も も 」「 ぶ どう 」 そ れ ぞ れ の 個数 が 変更 され る (onchange イ ベン ト ) と calcPrice 関 数 を 
+ 呼び 出し 、 合 計 金 額 を 自動 計算 し て 表示 し ます 。 
[送信 ] ポ タン が クリ ッ ク さ れる (onsubmit イ ベン ト ) と 確認 ダイ アロ グ に 合計 金額 を 表示 し 、 
[OK] ボ タン で 送信 し 、[ ク リア ] ボ タン で 送信 を キャ ン セ ル し ます 。 
[クリ ア ] ボ タン が クリ ッ ク さ れる (onreset イ ベン ト ) と フォ ー ム 内 容 の リセ ッ ト に 関す る 確 
認 ダ イア ログ を 表示 し 、 [OK] ボ タン で フォ ー ム 内 容 を リセ ッ ト 、 [キャ ン セ ル ] ボ タン で フォ ー 
ム 内 容 を 保持 し た まま フォ ー ム 画面 に 戻り ます 。 


// 合 計 金 額 を 計算 する 関数 
+ function cg/c/P/7ce(){ 
Var 7 の 7 の = document.qetElementById( "7o77o").selectedIndex * 4000: 
Var 7o// = document.getElementById( "の go ").selectedIndex * 3000: 
document.getElementById("o め 7").Value = 7o77O + が 77//: 


} 


// 送 信 ポ ボタン を クリ ッ ク し た と き の 処 理 を する 関数 
function s/ の 7777o777 (){ 
if(document.getElementById( "og が") .value == "0"){ 
alert( "金額 は O 円 で す 。『): 
return false: 


} 


テマ メ ユ 














Var 7es = confirm ("金額 は " + document.qetElementById( "og の 7").value+" 
で す 。 \n よ ろ し いで すか ? 『): 
f(!res){ 
return false: //SUBMIT 処 理 を キャ ン セ ル し ます 
pe } 
Treturn true: 


} 














// リ セッ ト ボ タン を クリ ッ ク し た と き 処 理 を する 関数 
1 function /ese/7o777 (){ 
Var 7@s = confirm(" フォ ー ム 内 容 を リセ ッ ト し ます 。 \n よ ろ し いで すか ?"): 
(es){ 
return false: // リ セッ ト の 処理 を キャ ン セ ル し ます 


} 
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return true: 
} 





※ ボ ー ダ ー や 内 容 領域 の サイ ズ は 外部 CSS で 指定 し て いま す 





<bodV> 
<form action="submit.html" onsubmit="return sg の 777o777 () " 
onreset="return /ese が の 777 ( ) "> 
<table> 

<tr><th> 商 品 </th><th> 単 価 </th><th> 注 文 数 </th></tr> 

<tr><td> も も </td><td>4000 円 </td> 

<td><select id="/77o77 の "onchange= "ca/c//7ce () "> 
<option>0</option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 

</select> 箱 </td></tr> 

<tr><td> ぶ どう </td><td>3000 円 </td> 

<td><select id=" カ 7o/" onchange="cg/cZ7ce り "> 
<option>0</option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 

</select> 箱 </td></tr> 

<tr><td colspan="2"> 合 計 金 額 </td> 

<td><input type="text" id="og が 77" value="0" size="6" /> 円 </td></ 









































tr> 
</table> 
<D テ > 
<input type="submit" id="s/ の 7 が "value=" 送 信 " /> 
<input type="reset" id="/esef" value=" ク リア " /> 
</D> 

</form> 
</bodV> 
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Internet Exp 


に ガー ム 提 作 時 に 処理 を .… X 








商品 単価 注文 数 
も も 4000 円 [1 マ 稲 
ぶどう 3000 円 3 y 和 
合計 金額 |13000 円 


































送信 || クリ ァ 





ひ 注 文 数 に よっ て 自動 計算 し 、 合 計 金額 を 算出 し ます 





| 本 PE5-』 。 | 


| き 2| 代 hep: /www Shoeisha.co = 呈 dl 人 @ カー ム 提 作 時 に 処理 を ..… x 関 (my | 
| 


商品 単価 注文 数 


























も も 4000 円 [1 マ 答 

ぶどう 3000 円 13 y 稚 

合計 金額 13000 円 ーー 
| 和信 クリ ア 





OK | キャ ン セ ル 」 








@[ 送 信 ] ボ タン を クリ ッ ク する と 、 確 認 ダイ アロ グ に 合計 金額 が 表示 され ます 
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| 提 フ 
| て 7 っ 3 "wshoelsha.co の ・ 邑 〇 | ほ オー ム 反 作 時 に 処理 を .… * 夫 
| 商品 単価 注 駐 数 ム 
| も も 4000 円 [1 マ 籠 操 
| ぶどう 300 円 3 マ 簡 上 - 
| 合計 金額 [13000 円 オー ム 内 容 を リセ ッ ト し ます - に 
よう し いで すか ? 処 
送信 || クリ ァ が 理 
OK キャ ン セ ル を 
ュ 行 記 
5。 
⑥[ ク リア ] ボ タン を クリ ッ ク す る と 、 確 認 メ イア ログ が 表示 され ます 。 
生 。 
才 
の 
onsubmit イベ ント ・ ン 
| 参照 2 onreset イベ ント ・・・ ト 
onchange イベ ント ・・ エコ 
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EVENT.SAMPLE-02 | 


読み 込み 時 に 処理 を 行う | 





ペー ジ の 読み 込み 終了 時 (onload イ ベン ト )、 他 の ペー ジ へ の 移動 時 (onunload イ ベン ト )、 
画像 読み 込み 失敗 時 (onerror イ ベン ト ) に メッ セー ジ を 表示 し ます 。 な お 、img タ グ の src 属 性 
に 存在 し な い フ ァイル (dog.gif) が 指定 され て いる た め 、 画 像 の 読み 込み が 失敗 し ます 
(onerror イ ベン ト 発 生 )。onerror イ ベン ト 発 生 時 に imgError 関 数 に よっ て メッ セー ジ を 表示 
し 、src 属 性 に 存在 する ファ イル (cat.gif) を 指定 し 直し て いま す 。 


イベ ント の 情報 を 参照 する 関数 
function 79/7o7(){ 
7es = confirm( "画像 の 読み 込み エラ ー で す 。\ ロ 再度 ペー ジ を 読み 込み ます "): 
if(/es == true){ //confirm ダ イア ログ で 「CK」 ッ ク 
document.qetElementById("77").src = "images/cat.qif": 
| E タ グ の src 属 性 を 変更 


] 友 クリ 





<body onload="alert(' 読 み 込み 完了 し まし た 。")" onunload="alert(' ペ ー ジ を 移動 し ます 。 
9" > 

<p><imd id="77 の "src="1mages/dog.gif" at="" onerror="7g7o7() "/></ 
D> 
</body> 


テツ マメ ユ 
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画像 の 読み 込み エラ ー で す 。 
再度 ペー ジ を 読み 込み ます 





2 








53 照 に の くも 】 
ロ onunload イベ ント ・・・- 】 


onerror イベ ント ーー ドー ドー ドー ) 








【<) 依 「ttp-J/www shoelsha.co の ・ 略 〇 | 読み 込み 時 に 処理 を 行 .… メ 













ペー ジ を 読み 込む と き 
(画像 の 読み 取り に 失 
敗 し 、onerror イ ベン 
ト が 発生 ) 






ペー ジ の 読み 込み が 完 
マン | 了 し た と き (onload イ 
ベン ト 発 生 時 ) 


| 別 の ペー ジ へ 移動 する 
ン | と き (onunload イ ベン 
_ ト 発 生 時 ) 
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EAA 




















EVENT.SAMPLE-03 


フォ ー カ ス の 移動 時 に 
処理 を 行う 







フォ ー ム の 入力 を チェ ッ ク す る サン プル で す 。[e-mail 入 力 欄 か ら フ ォ ー カ ス が 離れ た と き 
(onblur イ ベン ト ) に checkAdr 関 数 を 呼び 出し 、 入 力 内 容 (入力 内 容 に 「@」 が 含ま れる か ) を 確 
認 し ます 。 正 し く 入力 され て いな か っ た 場合 、 警 告 ダ イア ログ を 表示 し 、 テ キス ト 入 力 フィ ー 
ルド に 「@」 を 追加 し て フォ ー カ ス を [e-mail 入 力 欄 に 戻し ます 。 入 力 文字 列 が あれ ば 選択 状態 
に し ます 。 


また 、 ペ ー ジ ロー ド 時 (windowonload) に changeSize 関 数 を 呼び 出し 、 ウ ィ ン ド ウサ イ 
ズ と 表示 位置 を 指定 し て いま す 。 

ウィ ンド ウサ イズ 変更 時 (windowonresize) に は 、resize 関 数 に よっ て ペー ジロ ー ド 時 と 
同じ ウィ ンド ウサ イズ と 表示 位置 に 戻す よう に 指定 し て いま す 。 た だ し 、Internet Explorer 
と Opera で は 正常 に 動作 し な い の で 、Firefox と Chrome の み を 判別 し て 処理 を し て いま す 。 





window.onload = chanqeSize: 
window.onresize = resize: 


// ウ ィ ン ド ウサ イズ を 設定 する 関数 
function c7az7ge57ze(){ 
resizeTo(screen.availWidth / 2, screen.availHeight / 2): 
ウィ ンド ウサ イズ の 設定 
moveTo (screen.availWidth / 4, screen.availHeight / 4): 
/ ウ ィ ン ド ウ 表 示 位置 の 設定 


} 


// フ ォ ー カ ス が 離れ た と き の 処 理 の 関数 
function cec ん 4g7(c7ec ん ){ 
Var 7exfE/e/7 = document.getElementById( "ea77"): 
if(7exZE/e77.value.index0f("@",0) < 0){ // 入 力 さ れ た 文字 列 に 「@」 が な い 場 合 
alert(" メ ー ル アド レス を 正確 に 入力 し て 下さ い 。 l 
7ex7//e/7.value +="@⑨": 
7ex7/e/7.7 の cs り : 
exfZ/e/7.se/ecf り : // 入 力 され た 文字 列 を 選択 状態 に する 
} 
} 





// サ イズ 変更 時 に 呼ば れる 関数 
function 7es7ze リ { 
//Firefox.Chrome の 場合 の み 





150 | EVENTSAMPLE-03 





if(navigator.appName.index0f("Netscape") > -1){ 
resizeTo (screen.availWidth / 2, screen.availHeight /2 ): 
// ウ ィ ン ド ウサ イズ の 設定 
moveTo(screen.availWidth / 4, screen.availHeight / 4): 
// ウ ィ ン ド ウ 表 示 位置 の 設定 


<bodV> 
<form action="" id="707777" > 
<P> お 名 前 <1nput type="text" id="7a77e" size="30" /></D> 
<p>e-maik<1nput type="text" id="ea77" size="30" 
onblur="checkAdr() "/></p> 
</form> 














ーー ニー ーー ーー ーーー ニー ニー ニ ae 
入力 し た メー ル ア ド レス に 「@」 が 入っ て いな い 場 合 に [e-mail 入力 欄 か ら フ ォ ー カ ス を 離す と 、 警 
告 ダ イア ログ が 表示 され ます 


を 人 htp:/wwwshoeisha.oo  ・ 品 C| ガー カス の 移動 時 に 処 .… X 


お 名 前 狙 永 太郎 

















emall 国司 





@[e-mail 入 力 欄 に 「@」 が 挿入 され ます 
onresize イベ ント ーー ドド ーーー ドー ドー P131 
| 参 照 onblur イベ ント ーー ドド ドド ーー P132 
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EVENT.SAMPLE-04 


マウ ス 操 作 時 に 
処理 を 行う 


| 





マウ ス 操 作 時 に 処理 を 行う サン プル で す 。 画像 の 下 に ある [down & up] ボ タン が ダウ ン 
(mousedown イ ベン ト )、 ア ッ プ (mouseup イ ベン ト ) さ れる た びに 画像 を 切り 替え ます 。 マ 
ウス カー ソル を 画像 に 合わ せ た と き (mouseover イ ベン ト )、 外 し た と き (mouseout イ ベン 
ト ) も 画像 を 切り 替え ます 。 ま た 、 画 像 を ダブ ルク リッ ク す る (dblclick イ ベン ト ) と 、 ダ イア 
ログ を 表示 し 、 簡 単 な ア ニメーション の よう な 動き を 実現 し ます 。 


// ペ ー ジ ロー ド 時 に img の 配列 を 作成 する 関数 
function page/oag(){ 
Var 7779/77 = 4: // イ メー ジ の 数 
7a96 = new 4rray(): // 文 字 列 (img タ グ の src 属 性 に 設定 用 ) 配 列 を 作成 
7gZ/e77 = document.getElementById("779"): 
// イ メー ジ の 数 だ け 
for(7 = 0:7< 7gW77 : な +){ 
ag9es[7] = "1mages/anime" + テ + ォ ".qif": // 配 列 の 要素 に 順に 代入 
} 
} 


// マ ウス オー バー 時 の 処理 の 関数 
function 7o/se0ver(){ 
加 79Z/e/7.SrC = 7772965[3]: //img タ グ の src 属 性 を 変更 


} 


// マ ウス アウ ト 時 の 処理 の 関数 
function 娘 ose0/7(){ 
79Z/e/7.SrC = 7g9es[0]: //img タ グ の src 属 性 を 変更 


} 


// マ ウス ダウ ン 時 の 処理 の 関数 
function ose/ow7 () { 
779/e/7.SrC = 7g9e5[1]: //img タ グ の src 属 性 を 変更 


} 


// マ ウス アッ プ 時 の 処理 の 関数 


function 7ose の p(){ 
79Z/e/7.SrC = 7296s[0]: //img タ グ の src 属 性 を 変更 


} 
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// マ ウス ダブ ルク リッ ク 時 の 処理 の 関数 
function 7/C77c(){ 
co77 = 0: // ア ニメーション 用 の カウ ント 変数 
alert(" ア ニメーション を 開始 し ます 。"): 
777er7 = setInterval('g777a7 が 7 の, 500): // タ イマ ー を セッ ト 
} 


// 画 像 を アニ メー ショ ン さ せる 処理 の 関数 
function a777a7o7(){ 
96/e/7.Src = 7a9es[cog7]: //0.5 秒 ご と に 画像 を 切り 替え ます 
if(cogp# >= 3){ //4 枚 目 ま で 画像 が 切り 替わっ た ら 
clearInterval( が 7er7): // タ イマ ー を 削除 し ます 


} 
COZ7f++: // カ ウン ト 変 数 を +†1 し ます 
} 


// マ ウス 右 ク リッ ク 時 の 処理 の 関数 
function o7AC/7c(){ 

alert(" 石 クリ ッ ク は 無効 で す 。『): 

return false: //false を 返す と 右 ク リッ ク が 無効 に な り ま す 
} 


<body id="body" onload="page/gg "> 

<p><img id="77g" src="images/anime0.gif" at="" ondblclick=" の が /C/7c ん 0" 
onmouseover="77o/se0ve/() "onmouseout="/77o/se0/7 り "oncontextmenu="/e74/77 
o7C/7c ん の " /></p> 

<form action=""> 

<p><input type="button" value="down & up" onmousedown="77o/se/ow7(7" 

onmouseup="/77 の se の " /></p> 

</form> 


</body> 


NN 





と 3 


< : FTPYP や 5 





























⑥ マ ウス カー ソル が 画像 に 合わ さっ た と き に 画像 @ マ ウス を 操作 し て いな い 状態 
| が 切り 替わり ます 


| 








@⑨[down & up] ボ タン を クリ ッ ク す る と 、 画像 
が 切り 替わり ます 
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お 局 





全 アー メー ショ ン を 開始 し ます - 



































| 
| down & up 
| 


| 

ーー ジニ フー ニニ ーー テニ ーー ] 

画像 を ダブ ルク リッ ク す る と 、 ダ イア ログ が 表示 され ます 。 さ ら に [OK] ボ タン を クリ ッ ク す る と 、 
次 々 に 画像 を 切り 替わり 、 ア ニメーション の よう な 動き を 実現 し ます 


こ ロ 本 記 | 


| き 6 | 信 http://wwwshoelsha.co の ・ 避 C | 人 ほ マウ ス 提 作 時 に 処理 を .… x | | 
1 


作 右 の リッ は 無効 で す 。 














⑥ 右 クリ ッ ク す る と 、 ダ イア ログ が 表示 され ます 






| 参 照 onmouseover イベ ント P133 onmousedown イベ ント ドド P134 
1 onmouseout イベ ント P133 onmouseup イベ ント P134 
ondblclick イベ ント -・…・ ・P134 oncontextmenu イベ ント P135 
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中 











記 NIE な が ziS 証 田 t{〈《 を う <〈%⑳】 も こと).- し 
押さ れ た キー の | 


、 キー コー ド を 取得 する 


キー ボー ド の 入力 値 に 関す る 情報 を 表示 する サン プル で す 。 テ キス ト 入 力 フィ ー ル ド で キー 
ボー ド が 押さ れ た (onkeydown イ ベン ト ) とき に 、pressKey 関 数 を 呼び 出し 、 押 され た キー 
+ の キー コー ド を 参照 し 、 テキ スト エリ ア に 表示 し ます 。 また 、 そ の キー コー ド を fromCharCode 
メソ ッ ド て 文字 に 変換 し た も の も 同時 に 表示 し ます 。 
な お 、 ペ ー ジ が ロー ド さ れ た と き に onkeydown イ ベン ト の 設定 の 他 に 、 テ キス ト 入 力 フィ 
ー ル ド の ime-mode 属 性 を disabled に 設定 する こと で 日 本 語 入 力 を 不可 に し て いま す 
(Internet Explorer の み )。 


Var ん eyW//7: 
Var ん eyC7g/ 
Var ん ey57 =" の 


// 入 力 モ ー ド を 制限 する 関数 
function /oag/gge (){ 
document.qetElementById("7exf").style.imeMode = "disabled": 
テキ スト ボッ クス の 日 本 語 入力 を オフ に する 
document.getElementById("7exf").onkeydown = p/ess ん ey: 


} 


// 押 し た キー の キー コー ド を 出力 する 関数 
function p/ess ん ey(e){ 
Yf(@){ 
ん ey が 77 = e.keyCode: // キ ー コ ー | 
}else{ 
ん eyW77 = eve/7 た .keyCode: // キ ー コ ー | 
} 
ん eyC/ag/ = String.fromCharCode( ん ey77): // キ ー コ ー ド を 文字 に 変換 
ん ey5 な か = ey5 ケ + "キー:"+ eyC7ar+" / リ + リ キー コー ド :"+ keyNum + "\n の 
document.getElementById("/o9").value = eS が: // テ キス ト エ リア に 出力 


} 


// 入 力 さ れ て いる 値 を クリ ア す る 関数 
』 function c/7c ん C/eg/(){ 
ey? か =" 
document.getElementById( "zex7").value = "の : 
document.getElementById("/og").value = "の 


} 


テマ > ユ 
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<body onload="/oag/gge() "> 
<form action="" id="77777 "> 


<D> 
入力 し て 下さ い 。<br /> 
<input type= "text" id="zfexf" /><br /> 
<textarea id="/og" rows="6" cols="50"></textarea><br /> 
<input type="button" value=" ク リア "onclick="c/7ckC/ear()" /> 
</PD> 
</form> 
</bodV> 















Internet Exp 





押 
さ 
れ | 
7 
1 | 
の 
1 | 
ャ 
ド | 
を 
取 
尽 
す 
る 


XX 














[A][B][C][Shift] キ ー を 順番 に 押し た 場合 


AS 


EE 朋 : 参 onkeydown イベ ント ーー P139 
ネム Keycode: ヴ EN 天 症 い く NATmSO い に いこ P140 
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EVENT.SAMPLE-06 


イベ ント の 情報 を 
取得 する 







イベ ント の 発生 し た オブ ジェ クト 、 イ ベン ト の 種類 を ダイ アロ グ に 表示 する サン ブル で す 。 
ペー ジ 上 の リン ク お よび フォ ー ム の ボタ ン が クリ ッ ク さ れ た と き (onclick イ ベン ト )、 関 数 
getEvent を 呼び 出し ます 。 そ の 際 、 引 数 と し て event を 渡し ます 。 関数 getEvent で は 、 そ の 
イベ ント の 発生 元 の オブ ジェ クト と イベ ント の 種類 を 警告 ダイ アロ グ に 表示 し ます 。 な お 、 
InternetExplorer は target プ ロ パ ティ に 対応 し て いな いた め 、undefined を 返す の で 、 そ の 処 
理 を if 構文 で 分 岐 させ て いま す 。 


イベ ント の 情報 を 参照 する 関数 


function 9e だ Eve/7(e){ 


if(e.target == undefined){ //target プ ロ パ ティ 非 対 応 の 場 1 





alert( "発生 元 オ ブ ジ ェクト は 参照 で きま せん " + "\n イ ベン ト の 種類 は " + e.type): 


Teturn: 


} 





alert(" 発 生 元 オ ブ ジ ェクト は " + e.target + "\n イ ベン ト の 種類 は " + e.type): 











<body> 
<p><a href="http://www.ank.co.jp/" onclick="9efEre7r(eve/77) "> 株 式 会 社 アン 
ク </a></P> 


<form action=""> 


<P><input type="button" value=" イ ベン ト 情 報 " 
oncliick="ge/Eve7t(eve77) "/></D> 
</form> 
</bodV> 
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Ph 


イー プー・-。 mmaervrhPi。 nosimes。、  。 um 











名 想 ーーー ーーー 一 


「 イベ ント の 情報 を 取得 し た い - Windows mnternet Explorer に 回 較 | 
IO "" 、 出 琶 絞 因 c 妥 較 
| 哀 お 気に入り | 誠 イ バン ト O 情 報 を 取得 し た い 倫 ・ 回 - ロ 下 ・ ベ の ・“" 





























za・ ROW ・ 


| バージ 表 示 S れ ま マイ ュー ター 


Internet Explorer8 は target プ ロ パテ ィ に 対応 し て いな いた め 、undefined が 返さ れ ま す 


FirefOX マ 


し) イベ ント の 情報 を 取得 し た い 
を 。@ vw.shoeisha.com/book 


発生 元 オ ブ ジ ェクト | は [pbject HTMLmputElement] 
イベ ント の 種類 は click 





ボタ ン の クリ ッ ク 時 
FiTefOX * 


し イベン ト の 情報 を 取得 し た い 
www.shoeisha.com/book 


発生 元 オ プ ジ ェ クト | は http://wwwank cojp/ 


イベ ント の 種類 は click 








リン ク の クリ ッ ク 時 
| 参照 放つ P141 
| | NT IN SOSEgeO2ceY> P141 
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イベ ント が 発生 し た 
位置 を 調べ る 


マウ ス が クリ ッ ク さ れ た 位置 を 座標 で 表示 する サン プル で す 。 マウ ス の ボタ ン が クリ ッ ク さ 
れ た と き (onmousedown イ ベン ト )、mDown 関 数 を 呼び 出し 、 そ の と き の マ ウス の 位置 ( 座 
標 ) を フォ ー ム に 表示 し て いま す 。 各 ブ ラウ ザ で 対応 し て いな い プ ロ パ ティ は 値 が undefined 
と な り ま す 。 





document.onmousedown = 7o の 7: //Onmousedown ロ イベ ント に mDown 関 数 を 登録 


/ 座 標 を 取得 する 関数 
function 7 の o7(e){ 
/ 変 数 の 宣言 
Var sx/e77 = document.qetElementById("sx" 
Var sy/e77 = document.getElementById("sy"): 
Var px/e/7 = document.getElementById("px"): 
Var pyE/e77 = document.getElementById( "py"): 
Var xE/e/7 = document.getElementById("x"): 
Var yE/e/7 = document.qetElementById("y"): 
//Internet Explorer 以 外 の 処理 
if(@){ 
sX/e/7.Value = e.screenX: 
syZ/e/7.value = e.screenY: 
X//e/7.Value = e.DadeX: 
y/7e/7.value = e.pageY: 
X/e/77.Value = e.x 
JZ7e/7.value = e.V: 
/Internet Explorer の 処理 
}else{ 
sx/e/7.Value = event.screenX: 
SV/e/7.value = event.screenY: 
px/e/7.Value = event.paqeX: 
py/7e/7.Value = event.paqeY: 
xElem.value = event.x: 
VElem.value = event.y: 
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※ レ イア ウト は 外部 CSS で 指定 し て いま す 
<bodV> 
<form action=""> 
<table> 
<tr> 
<td> モ ニタ 上 の X 座 標 (ScreenX) </td> 
<td><input type="text" id="sx" /></td> 
<td> モ ニタ 上 の Y 座 標 (ScreenY)</td> 
<td><input type="text" 1d="sy" /></td> 
</tr> 
<tr> 
<td> ペ ー ジ 上 の X 座 標 (pageX)</td> 
<td><input type="text" 1d="px" /></td> 
<td> ペ ー ジ 上 の Y 座 標 (pageY) </td> 
【 <td><input tVpe="text" 1d="py" /></td> 
</tr> 
] <tr> 
<td> 前 面 の X 座 標 (x) </td><td><input type="text" 1d="x" /></td> 
<td> 前 面 の Y 座 標 (y)</td><td><input type="text" id="y" /></td> 
! </tr> 
</table> 
</form> 
</body> 


Internet Exp 








ご 全 本 前 人 づ htp:/www.shoeisha.co D ・ 四 〇 


人 発生 する イベ ント を 処理 .… 























































座標 433 
(screenX) (screenY) 

ペー ジ E ベー ジ 上 

の X 座 標 |53 の Y 座 標 |188 
(pageX) (pageY) 

前 面 の X 座 53 前 面 の Y 座 188 
標 (s) 標 ⑦) 








生ま し た 位置 の 座標 が 表示 され ます 。 ブ ラウ ザ に 対応 し て いな い プ ロ パ ティ で は undefined が 返 





| 参照 x プ ロ パ ティ ーー ドリ ーーー P142 pageY プロ パテ ィ ーー ドド の | 
ピ ネ ぶ y プロ パテ ィ …・…・ ー…・・P142 screenX プロ パテ ィ -・・ トロ 
GBS の で CASEm CSoaa 5 EE142 Screen ツラ た M デ テイ ここ narannmwst 
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EVENT.SAMPLE-08 


マウ ス の 動き に 合わ せ て 
画像 を 動か す 





マウ ス の 動き に 合わ せ て 画像 が 動く サン プル で す 。 

まず CSS フ ァイル で は position:absolute: を 指定 し ます 。 こ れ は マウ スカ ー ソ ル の 座標 に 対 
し 、 画 像 を 表示 する 領域 の 絶対 値 を 確保 する も の で す 。 マ ウス が 動か され る と 、onmousemove 
イベ ント に 設定 し て いる move/Mouse 関 数 を 呼び 出し 、 イ ベン ト が 発生 し た 座標 (マウ ス の 位 
置 ) を 取得 し ます 。moveMouse 関 数 で は イベ ント 引数 を 取得 で きる か どう か で ブラ ウザ を 判 
別 し 、 処 理 を 振り 分 け て いま す 。 imgMMove 関 数 で は 、 外 部 CSS フ ァイル の left, topp プ ロ パ テ 
イィ を 書き 換え て お り 、 こ れ に よっ て 画像 の 位置 が 指定 され ます 。 こ の imgMove 関 数 は タイ マ 
ー で 150 ミ リ 秒 ご と に 呼び 出さ れ て いる の で 、 マ ウス の 動き に 合わ せ て 画像 が 移動 する よう な 
動き が 実現 で きま す 。 な お 、 タ イマ ー の 設定 は 最初 の 1 回 の み 必要 な の で 、 初 回 の み の 動 作 に 
な る よう に 変数 flag を 設定 し て いま す 。 





// 変 数 の 宣言 
Var 779//e/7: 
Var X: 

Var 7: 

Var gg = true: 


// ペ ー ジ ロー ド 時 の 処理 

function /oag/gge(){ 
79Z/e77 = document.getElementById("779"): 
document.onmousemove = /7 の Ve/7 の 7se: 


} 





ウス が 動い た と き の 処 理 
function 7ove/ose(e){ 

if(e){ // 引 数 が 取得 で きる と き (Firefox な ど ) 
メ = @。DadeX: 
了 = @.DadeY: 

)elset // 引 数 が 取得 で き な い と き (IE な ど ) 
ァ = event.clientX: 
= event.clientY: 





} 
if(g9) { // 最 初 の み 実行 する 処理 

7gg = false: 

setInterval( "gove () ",150): // タ イマ ー を セッ ト 
} 
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ーー HE 





} 


// 画 像 の 位置 を 設定 する 処理 

function gove り { 
7gZ/e/7.style.left = x + document.body.scrollTop +"px": 
加 7gZ/e/7.style.top = y + document.body.scrollLeft + "px": 


ql は 村 Q 商 園 人 は ざさ nbnO 財 >JT く | 


} 





※ レ イア ウト は 外部 CSS で 指定 し て いま す 


<body onload="/opag/gge() "> 
<div id="779"> 


<imdg src="1mages/1ico_clovergif" alt="" /> 
</div> 
</bodV> 





div { 
POsition: absolute: 
top: -50Dx: 
left: -50px: 
Z-index: 1: 


} 








Internet Explorer 








年 因 光代 itp shoeisha.co D ・ 四 の 借 て ウス カー ソル を 追い か .… 














マウ ス の 動き に 合わ せ て 画像 が 動き まま す 9 

べ ベ 

| ClientX プロ パテ ィ ン 

| 参照 】 ClientY プロ パテ ィ ト 
DageX プロ パテ ィ に コ 
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ITIVEROT 5 … 5 還 還 還 還 


ー 定 時 間 後 に 処理 を 行い た い 


@ = 文 .setTimeout( 多 , ^) タイ マー を 吉 ま 
文 .clearTimeout(@) タイ マー を 


@…… タ イマ ー 識 別 子 を 格納 する 変数 [省略 可 】※clearTimeout を 併用 する 場合 は 省略 不可 
玉 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) [省略 可 】 

実行 する 命令 (関数 

ム -…- 指 定時 間 ( ミ リ 秒 ) 





葉 兵 還 メソ ッ ド 


se 
指定 し た 時 間 後 に 命令 を 実行 し ます 。 


setTimeout メ ソ ッ ド 

タイ マー の 設定 を 行う メソ ッ ド で す 。 setTimeout メ ソ ッ ド で 設定 し た タイ マー は 、 指 定時 
間 が 経過 する と 1 回 だ け 関 数 を 呼び 出し ます 。 時間 は ミリ 秒 (1 プ 1000 秒 ) 単 位 で 指定 し 、 た と 
えば 1000 を 指定 する と 1 秒 後 に 動作 し ます 。 


clearTimeout メ ソ ッ ド 
clearTimeout メ ソ ッ ド は 、setTimeout メ ソ ッ ド で 設定 し た タイ マー を 解除 し ます 。 設 定時 
に タイ マー 識別 子 を 変数 借 で 取得 し 、 そ の 変数 を 使っ て タイ マー を 解除 し ます 。 


が er7 = setTimeout("/7sg()", 3000): 


関数 msg() を 3 秒 後に 呼び 出し ます 。 


clearTimeout( が 77e/7): 
setTimeout メソ ッ ド で 設定 し た タイ マー を 解除 し ます 。 





p ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera iOS6 Android 


〇 O O O O O O O 5) O 


参照 一 定時 間 ご と に 処理 を 行い た い -・--・・・・・・ P165 
ロ 
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3 室 議 議 議 議 議 議 議 語 。 '〔 ハ 〔%… ペ e※ ペ ぴよ も {「( 〇 ゎ 』 
ー 定 時 間 ご と に 処理 を 行い た い 


@ = 誠 .setInterval($, ^) タイ マー を 本 
文 .clearInterval(@) タイ マー を 衣 際 








@…… タ イマ ー の 識別 を 格納 する 変数 【 省 略 可 】※clearInterval を 併用 する 場合 は 省略 不可 
文 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 )【 省 略 可 】 

実行 する 命令 (関数 ) 

人 …… 指 定時 間 ( ミ リ 秒 ) 





昭 再 還 メソ ッ ド 





指定 し た 時 間 ご と に 繰り 返し 命令 を 実行 させ する に は 、setlntervalu メ ソ ッ ド を 利用 し ます 。 


setinterval メ ソ ッ ド 

タイ マー の 設定 を 行う メソ ッ ド で す 。 setlInterval メ ソ ッ ド で 設定 し た タイ マー は 、 指 定 し 
た 時 間 ご と に 関数 を 呼び 出し 、clearInterval メ ソ ッ ド で 解除 され な い 限 り 停止 し ませ ん 。 時 
間 は ミリ 秒 (1 プ 1000 秒 ) 単 位 で 指定 し 、 た と えば 1000 を 指定 する と 1 秒 ご と に 動作 し ます 。 


clearinterval メ ソ ッ ド 
setInterval メ ソ ッ ド で 設定 し た タイ マー の 解除 を 行い ます 。 設定 時 に タイ マー 識別 子 を 変 
数 劉 で 取得 し 、 そ の 変数 を 使っ て タイ マー を 解除 し ます 。 


が 777e/2 = setInterval("77s9", 500): 
関数 msg0 を 0.5 秒 ご と に 呼び 出し ます 。 


clearlnterval( が 77e/2): 
setInterval メ ソ ッ ド で 設定 し た タイ マー を 解除 し ます 。 








ぁ ょ ブラ ウザ 対応 表 IE10 IE9 |:】 Fx Chrome Safari Opera ijOS6 Android 
〇 O 9 ③ O O 〇 〇 O 9) 


参照 一 定時 間 後に 処理 を 行い た い ・…・・・ P164 
| n 【SAMPLE】 一定 時間 ご と に 処理 を 行う ・‥-・・・ P166 
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ー 定 時 間 ご と に 
処理 を 行う 






ペー ジ が 読み 込ま れる と 0.01 秒 ご と に countTime 関 数 を 呼び 出し 、 経 過 時 間 を 表示 し ます 。 
[停止 ] ボ タン が クリ ッ ク さ れる と 、 タ イマ ー を 解除 し て (経過 時 間 の 表示 が 停止 し ます )、 ボ タ 
ン の 表示 を [再開 ] に 切り 替え ます 。 そ の 状態 で ボタ ン が クリ ッ ク さ れる と 、 今度 は タイ マー を 
セッ ト し 、 カ ウン ト を 再開 し ます 。 こ の と き ボ タン の 表示 は [停止 ] に 戻り ます 。 


|JavaScript 。 。 , 
Var og/ = 0: 
Var 7 = 0: 
Var sec = 0: 
Var 775ec = 0: 
Var 57: 
Var 5 か: 
Var Ss が 3: 
Var s775: 
function cog777777e (){ // 経 過 時 間 を 表示 する 関数 
775ec++: //mSec に 1 を 加え る 
f( 太 Sec == 100){ //mSec が 100 に な っ た ら 
Sec++: //seC に 1 を 加え る 
775ec = 0: //mSec を 0 に 戻す 
f(sec == 60){ //sec が 60 に な っ た ら 
女 7++: //min に 1 を 加え る 
Se@c = 0: //sec を 0 に 戻す 
if( 太 如 == 60){ //min が 60 に な 
7 の 7++: //hour に 1 を 加え る 
女 如 = 0: //min を 0 に 戻す 
} 
} 
} 
// 値 を 表示 用 変数 に 代入 
5 な = の 
5 か = の 7: 
57 = sec: 
5 か? = /75ecz 
// 1 桁 の 場合 は 頭 に "0" を つけ る 
(og7 < 10)57 ガ = "0" + 5 な 7: 
(太刀 < 10)s7 な 7 = "0" + 5 な 7: 
f(sec < 10)s73 = "0" + 5 が 73: 
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f(75ec < 10)5 か 5 = "0" + 5 か 5: 
document.getElementById( "7e").value = s7 ガ + ォ リリ ェ 5 が 7+ の リ ォ 5 が 7 う + 
リリ ェ 5 か 75: 
} 
function c/7c ん go7(){ // ボ タン が クリ ッ ク さ れ た と き の 処 理 
var 77/e7 = document.getElementById( "777"): 
if(277/e/7.value == "停止 "){ //「 停 止 」 ボ タン クリ ッ ク 時 
clearInterval( が er7): // タ イマ ー を クリ ア 
77/e/7.Value = "再開 ": // ボ タン の 表示 を 「 再 開 」 に 変更 
}else{ //「 再 開 ] ボ タン クリ ッ ク 時 
777e/7 = setInterval( "cog777777e()", 10): // タ イマ ー を 再 セッ ト 
の 77 太 e/7.Value = "停止 "> // ボ タン の 表示 を 「 停 止 」 に 変更 
} 
} 











<body onload="timer1=setInterval('cog77777e()',10)" onunload="clearInterval 
(が 77e/7) "> 

<form action="" > 

<p> 経 過 時 間 : <1nput type= "text" id="777e" value="00:00:00:00" /><br /> 
<input type="button" id=" の が / が が 7" Value=" 停 止 " onciick="clickButton() " /></P> 
</form> 

</bodV> 


WW 













経過 時 間 : 
00:00.29.90 








ペー ジ が 読み 込ま れる と 、 経 過 時 間 の カウ ント  @[ 停 止 ] ボ タン を クリ ッ ク す る と 、 タ イマ ー が 解除 
が 始ま り ま す され 、 ボ タン の 表示 が [再開 ] に 切り 替わり ます 


| 参 照 S6HtenakXk ド na な ttc の irc P164 
ロ clearinterval メソ ツ ッ ド ニー ーーー P164 
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ARRAY.01 


配列 を 使い た い 


文 = neW Array( 金 ) 新しい 配列 を 作成 | 
文 = heW ArraV( 全 , 全 , .., 人 ) を 作成 し デー タ を 格 和 
文 .lenqth 配列 の 要素 数 を 参照 ノ 設定 





衣 ……Array オ ブ ジ ェクト 
配列 の 要素 数 【 省 略 可 】 
全 …… 配 列 の デー タ 【 省 略 可 





オブ ジェ クト (Array)、 ブ プロパ ティ (length) 





配列 は 複数 の 変数 を 1 つ に まとめ た も の で 、Array は この 配列 を 扱う た め の オ ブ ジ ェクト で 
す 。 配列 を 構成 する 変数 を 要素 と いい ます 。HTML の 要素 と は 意味 が 異な る の で 、 注 意 し て く 
だ さい 。 


Array オ ブ ジ ェクト 
新しい 配列 を 作成 する 際 は new ス テー トメ ント (p.039) を 使用 し ます 。 配列 の 要素 数 を あら 
か じ め 指 定 する に は 次 の よう に な り ま す 。 
new Array() 
要素 の デー タ を 指定 する に は 次 の よう に な り ま す 。 
new ArraV(^, 人 , .…, ^) 
要素 数 や 要素 の デー タ を 指定 せ ず に new Array() と いう 形式 で 作成 し た 配列 は 、 後 か ら 加 え 
た 要素 の 数 に 合わ せ て 自動 的 に 配列 の 大 き さ を 変更 し ます 。 配列 の 個々 の 要素 を 参照 する に 
は 、" 配 列 名 [参照 番号 ]" の よう に 記述 し ます 。 参照 番号 の 部 分 は 添字 と 呼ば れ 、0 か ら の 連 番 
に な り ま す 。 つ まり 、myArray と いう 配列 の 3 番目 の 要素 を 参照 し た い 場合 は 次 の よう に な り 
ます 。 
myArray[2] 


添字 に は 参照 番号 の 代わ り に 文字 列 を 使う こと も で き 、 こ の よう な 配列 を 連想 配列 と いい ま 
す 。 添字 が 英文 字 列 の 場合 は 、 オ ブ ジ ェクト 名 と 添字 を 「. 」( ビ ピリオド) で つない で 表記 し て も 
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同じ 意味 に な り ま す 。 「 札 
| 列 

length プ ロ パ ティ | を 
配列 娘 の 要素 数 を 参照 / 設 定 し ます 。 | 暫 

| た 

い 

















4/7gy = new ArraV(): 
配列 オブ ジェ クト myArray を 作成 し ます 。 


yee ん = new ArraV( 日 "7 ア 森 "の 金 " 土 9: 
配列 オブ ジェ クト myWeek を 作成 し 、 加 要素 に 日 一 土 を 指定 し ます 。 


如 /477gy[3] = "Safari" 
配列 オブ ジェ クト myArray の 4 番目 の 要素 を Safari に し ます 。 


for(7 = 0: 7 < 77y477gy.lengthi カ +) て … ナ 
配列 オブ ジェ クト myArray の 要素 数 だ け …… の 処理 を 繰り 返し ます 。 


9o9s = new ArraV(): 
9gg[ コウ '] = 秋田 犬 ! 
gg[ ハク '] = "サモ エド : 
犬 の 名 前 で 連想 配列 を 作成 し 、 犬 種 を 代入 し ます 。 


g77 = neW ArraV(): 

g77.rabbit = うさぎ": 

g77.bear = くま" 

動物 の 種類 を 表す 英文 字 列 で 連想 配列 を 作成 し 、 日 本 語 名 を 代入 し ます 。 








p ブラ ウザ 対応 表 IE10 IE9 |:】 Fx Chrome Safari Opera iOS6 Android 
O (⑳ O 〇 O O O O 〇 O 











参照 】 (基礎 編 ) オブ ジェ クト を 扱う ・・・・・・・・・・ P037 
ピー ム 【SAMPLE】2 つの 配列 を 操作 する ・・・・・・・ P176 
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ARRAY.02 


配列 要素 を 追加 削除 し た い 


人 = 文 .DOD( ) 最後 尾 の 要素 を 取り 出す 
^ = 文 .Shift( ) 先頭 の 要素 を 取り 出す 
文 .Dush( 人) 配列 の 最後 尾 に 要素 を 追加 
文 .unshift() 配列 の 先頭 に 要素 を 追加 





廊 ……Array オ ブ ジ ェクト 
人 ^…… 取 り 出し た 要素 
念 … 追 加 す る 要素 





茹 皇 還 メソ ッ ド 





配列 の 要素 を 追加 削除 する メソ ッ ド で す 。 


PoP、shift メ ソ ッ ド 

Pop メ ソ ッ ド は 配列 の 最後 尾 の 要素 、shift メ ソ ッ ド は 配列 の 先頭 の 要素 を 取り 出し 、 そ の 
要素 を 返し ます 。 取 り 出 し た 要素 は 配列 か ら 削 除 し ます 。 

つま り 


77 ル 477gy = new Array("blue", "white", "red"): 
7767 の 7 = 7 ガル 477g/.DOD(): 


の よう に 配列 を 作成 し て か ら pop メ ソ ッ ド を 使用 し た 場合 、 配 列 myArray の 要素 は blue、 
white の 2 つ に な り 、 変 数 menu1 に は red を 格納 し ます 。 


Push、unshift メ ソ ッ ド 

push メ ソ ッ ド は 配列 の 最後 尾 、unshift メ ソ ッ ド は 配列 の 先頭 に 要素 移 を 追加 し ます 。 複数 
の 要素 を 「,」( カ ンマ ) で 区 切っ て 指定 すれ ば 、 一 度 に 複数 の 要素 を 追加 する こと も 可能 で す 。 
unshift メ ソ ッ ド て 要素 を 追加 し た 際 、 あ ら か じ め あ っ た 要素 は 1 つ ず つ 後 ろ に ずれ ます 。 
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7y47ay.POP(): 
配列 myArray の 最後 尾 の 要素 を 取り 出し ます 。 


4/7gy = new Array(" 東 京 ", "大 阪 ", "京都 "): 
如 e777 =7/4/7gy、Shift(): 

配列 myArray の 先頭 の 要素 (東京 ) を 取り 出し て 、menu1 に 代入 し ます 。myArray の 要素 は 「 大 
阪 」、「 京 都 」 の 2 つ に な り ま す 。 


477gy.push("butterfly"): 
配列 myArray の 最後 尾 に butterfly を 追加 し ます 。 


4/7gy.unshift(document.7o/777.77cK7g77e.Value): 
配列 myArray の 先頭 に form1 の エレ メン ト nickname の 値 を 追加 し ます 。 








ょ ブラ ウザ 対応 表 IE10 1 3 Fx Chrome Safari Opera iOS6 Android 
O 〇 O 〇 O O O O O O 








| 参照 デー タタ を 交 ペ 替え だ た UYGR ycosc の * oe Taoyo P172 
ロ 配列 要素 の 分 割 / 統 合 / 置 換 を し た い ・・-・ P174 


【SAMPLE】2 つの 配列 を 操作 する P176 
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配 
列 


は いい が VA た) 


デー タ を 並べ 替え た い 


人 人 、 = 文 .sot( 銘 ) 配列 要素 を 並べ 替え る 
人 4、 ニ = 文 .reVerSe ( ) 配列 要素 を 逆順 に 並べ る 


衣 …… Array オ ブ ジ ェクト 
人 … 並 べ 替 え の 方 法 【 省 略 可 】 
人 る …… 結 果 を 格納 する 変数 








馬 皇 メソッド 





配列 の 要素 を 並べ 替え る メソ ッ ド で す 。 


sort メ ソ ッ ド 

配列 の 要素 を 並べ 替え ます 。 並 べ 替え の 方 法 移 を 省略 し た 場合 は 、 文 字 コ ー ド 順 ( 昇 順 ) に 並 
べ 替 えら れ ま す 。 数 値 で あっ て も 文字 コー ド 順 に な る 点 に 注意 し て くだ さい 。 た と えば 、 配列 
(40. 100. 80. 10) の 要素 を 並べ 替え る と 、(10. 100. 40, 80) に な り ま す 。 数 値 を 数 値 順に 並 
べ 替 える に は 、 並 べ 替え の 方 法 を 関数 で 指定 し ます (右記 コラ ム 参 照 )。 


reverse メ ソ ッ ド 
配列 の 要素 の 並び 順 を 反転 させ ます 。 た と えば 配列 (5. 3, 7. 2) の 場合 は (2, 7. 3. 5) に な り ま 
す 。 


の ya7g = の 4/7agy.Sort(ow7/7c): 


配列 myArray の 要素 を 関数 downFunc の ルー ル で 並び 替え た も の を 変数 myData に 代入 し ま 
す 。 





77 ル gg = の 477g.『eVeTSe() : 
配列 myArray の 要素 の 並び 順 を 反転 させ た も の を 変数 myData に 代入 し ます 。 
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Column 数 値 を 昇順 降順 で 並べ 替え る 
数 値 を 並べ 替え る に は 、 並べ 替え の 方 法 を 関数 で 指定 し ます 。 昇順 に 並べ 替え る に は 


myData = 支 .sort(shoujun) 
function shoujun(a,b){return a-b:} 


の よう に 記述 し ます 。 逆 に 降順 に 並べ 替え る に は 


myData = 文 .sort(koujun) 
function koujun(a,b)treturn b-a 


と 記述 し ます 。 関 数 名 shoujun、koujun は 別 の 名 前 で も 構い ませ ん 。 内 部 的 に は 1 つ ず つ 要 素 の 
比較 を 行っ て 、 関 数 か ら 返す 値 が 正 か 負 か に よっ て 順番 を 入れ 替え て いま す 。 


ヶ ブラ ウザ 対応 表 IE10 IE9 13:) Fx Chrome Safari Opera iOS6 Android 
O O O 〇 O 〇 O O O 〇 O O 
上 参照 2 配列 要素 を 追加 削除 し た い ・・・・・・ー P170 
5 配列 要素 の 分 割 / 統 合 / 置 換 を し た い ・・・・ P174 
大 文字 ・ 小 文字 に 変換 し た い ・…・・・ P200 
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、 配列 要素 の 分 割 / 統 合 / 置 換 を し た い 





| ヤマ = 文 .concat() 2 つの 配列 を 結合 
ー | マ = 文 。Slice(4, へ ) 配列 の 要素 を 取り 出す 
文 .Splice(^, , @⑯, @,...) 中 Me 
マ = 文 .]O1n (一 ) 配列 の 要素 を 結合 





] 。。 ャ … 結 果 を 格納 する 変数 
廊 ……Array オ ブ ジ ェクト 
結合 する 配列 名 


| へ …… 終 了 位 軒 
ー | @…… 置 換 する 文字 数 
| 。 。 @… 置 換 デー タ 【 省 略 可 
| 画 … 区 切り 文字 【 省 略 可 





メソ ッ ド 
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ツ ーー 


配列 の 要素 を 操作 する メソ ッ ド で す 。 要素 の 参照 番号 は 0 か ら 始 まり ます 。 


concat メ ソ ッ ド 
2 つの 配列 を 結合 し 、1 つ の 配列 と し て 返し ます 。 


slice メ ソ ッ ド 

指定 し た 開始 位置 A か ら 終了 位置 へ まで の 範囲 の 要素 を 取り 出し て 、 配列 と し て 返し ます 。 
取り 出さ れる の は 終了 位置 の 1 要素 前 まで で す 。 

た と えば 配列 の 3 番目 か ら 5 番目 まで の 要素 を 取得 し た い 場合 は 次 の よう に 記述 し ます 。 


川 


slice(2, 5) 
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spPlice メ ソ ッ ド 
指定 し た 開始 位置 4 から 終 了 位 置 へ で 指定 し た 数 分 の 要素 を 置き 換え ます 。 複 数 の 置換 デー 
タタ (要素 ) を 「,」( カ ンマ ) で 区 切っ て 指定 する こと も 可能 で す 。 指定 し た 置換 デー タ の 数 に よっ 
て 、 配 列 の 要素 数 は 変化 し ます 。 た と えば 配列 の 3 番目 か ら 5 番目 まで の 要素 を 置き 換え た い 
合 は 次 の よう に 記述 し ます 。 


splice(2, 3, "置換 文字 ") 
3 番目 だ け を 置き 換え た い 場 合 に は 次 の よう に 記述 し ます 。 
splice(2, 1, "置換 文字 ") 
join メ ソ ッ ド 


配列 の 要素 を 指定 し た 区 切り 文字 軒 で 連結 し 、 結 果 の 文字 列 を 返し ます 。 区 切り 文字 軒 を 省 
略し た 場合 は 「.」( カ ンマ ) で 結合 し ます 。 


myArray =myArray1.concat(myArray2): 
配列 myArray1 と myArray2 を 連結 し 、 変 数 myArray に 格納 し ます 。 


myStr =myArray.slice(3, 6): 
配列 myArray の 4 一 6 番目 の 要素 を 取り 出し 、 配列 と し て myStr に 格納 し ます 。 


myArray.splice(0, 2, "red", "green", "yellow"): 
配列 myArray の 1~3 番 目 の 要 素 を それ ぞ れ red、green、yellow に 置き 換え ます 。 


document.write(myArray.join("/")): 
配列 myArray の 要素 を 「/」( ス ラッ シュ ) で 区 切っ て 結合 し 、 表示 し ます 。 





p ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 
〇 O O O 〇 O O O 〇 O O 〇 O 
参 照 配列 要素 を 追加 削除 し た い ・・・…・ P170 
が デー タ を 並べ 替え た い ・……… ド ーー P172 
【SAMPLE】2 つの 配列 を 操作 する P176 
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ARRAY.SAMPLE-01 


2 つの 配列 を 操作 する 









2 つの 配列 を 操作 し 、 表 示す る サン プル で す 。 画面 上 の テキ スト 入力 フィ ー ル ド 、 セ レク ト 
ボッ クス や ボタ ン を 使っ て 2 つの 配列 を 操作 で きま す 。 

要素 の 追加 、 置 換 を 行う に は 、 最 上 部 の 「 要 素 の 文字 列 」 テ キス ト 入 力 フ ィ ー ル ド に 文字 列 を 
入力 し ます 。 そ し て 、 操作 し た い 配 列 を セレ クト ボッ クス で 沿 択 し 、 「 (配列 ) の 先頭 に 要素 を 師 
加 す る 」 の [追加 j ボ タン を クリ ッ ク (case0 : unshift0 メ ソ ッ ド ) す る か 、 「( 配 列 ) の (テキ スト 入 
カフ ィ ー ル ド ) 番 目 の 要 素 を 要素 の 文字 列 に 置換 させ る 」 の [置換 ] ボ タン を クリ ッ ク (case4 : 
splice メ ソ ッ ド ) し ます 。 

要素 の 削除 する 際 は 、 配 列 を 選択 し 、「( 配 列 ) の 最後 尾 の 要素 を 削除 する 」 の [削除 ] ボ タン を 
クリ ッ ク (case1 : pop メ ソ ッ ド ) し ます 。 

結合 する 場合 は 、 セ レク ト ボ ックス て 結合 させ た い 2 つの 配列 を 選択 し 、[ 結 合 ] ボ タン を ク 
リッ ク (case2 : concat メ ソ ッ ド ) す る か 、 配列 の 一 部 を テキ スト 入力 フィ ー ル ド で 指定 し て 
[結合 ボタ ン を クリ ッ ク (case3 : concat メ ソ ッ ド 、slice メ ソ ッ ド ) し ます 。 

操作 し た 結果 の 配列 の 状態 は 下部 の テキ スト エリ ア に それ ぞ れ 表示 され ます 。 配列 の 要素 を 
表示 する 際 に は 、join メ ソ ッ ド に よっ て 配列 の 要素 を 結合 し て いま す 。 join メ ソ ッ ド は 引数 を 
省略 する と 配列 の 要素 を 「,」( カ ンマ ) で 区 切り ます 。 


Var 77 ル 477g = neW ArraV () : 
77 ル 477gy[0] = new Array(): 


7 カル 4/77gy[1] = new Array(): 


// 画 面 で の 入力 に そっ て 配列 を 操作 する 関数 
function c7a7ge477ay(777){ 
Var 7777e77 = document.getElementById("/77"): 
// 選 択 さ れ て いる 項目 (配列 ) の index 値 を 変数 に 代入 
Var /75 の 7 = 2/77E/e77.507.selectedIndex: 
Var /75772 = 777/e/77.s02.selectedIndex: 
// ク リッ ク さ れ た ボタ ン に よっ て 処理 を 振り 分 ける 
switch(7g77){ 
Case 0: //( 先 頭 に 要素 を )「 追 加 j」 ボ タン 
477ay[/75777] .unshift(/7E/e77.input1.value): 
break: 
case 1: //( 最 後 尾 の 要素 を )「 削 除 」 ボ タン 
の 477gy[/75777].pop(): 
break: 
Case 2: //( 配 列 を )「 結 合 」 ポ ボタ > 
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7y477gy[/7577] = カル 477ay[/757].concat(7y47gy[/7572] ) 
break: 
Case 3: //( 要 素 を 指定 し て )「 結 合 」 ボ タン 
Var 7e77/4/7gy = new ArraV(): 
7e77p4/7gy = 77477g ル [/75772] .slice (7o/77/e77.5 ね /7 が 77.Value-1., 
70/77E/e77.e7W/77.Value): 
77y47gy[/7577] = 7 カル 477gy[/7577].concat(7e77p472/) 7 
break: 
Case 4: //「 置 換 ] ボ タン 
77y477gy[/7577].splice(70/77E/e77.s ね 7 が 772.value-1,1, 75777E/e/77. 
input1.value): 
break: 
} 
7o/77E/e77.07 の 77.value = 7y47gy[0].join(): 
7o/77E/e7.07 の 72.value = 7y4/7gy[1].join(): 


} 


※ ボ ー ダ ー は 外部 CSS で 指定 し て いま す 
<bodV> 
<form action="" id="7o/777"> 
<table> 
<tr><th> 要 素 の 文字 列 </th></tr> 
<tr><td><input tVpe="text" name="7p/77 "size="20" /></td></tr> 
</table> 
<table> 
<tr><th colspan="3 "> 処理 内 容 </th></tr> 
<tr> 
<td rowspan="5"><select name="s07"> 
<option> 配 列 1</option><option> 配 列 2</option></select></td> 
<td colspan="2"> の 先頭 に 要素 を 
<input type="button" value=" 追 加 " onclick="c7a7ge4/7gy(0) " /></td> 
</tr> 
<tr> 
<td colspan="2"> の 最後 尾 の 要素 を 
<input type="button" value=" 削 除 " onclick="c7a7ge4/7gy(1)" /></td> 
</tr> 
<t『> 
<td rowspan="2"> に <select name="s02"> 
<option> 配 列 1</option><option> 配 列 2</option></select></td> 
<td> を 
<input type="button" value=" 結 合 " onclick="c7a7ge4/77gy(2)" /></td> 
</ tr> 
<tr> 
<td > の <input type="text" name="s7g 訂 7 "size="3" />ー 
<input type="text" name="e7//77" Size="3"/> 番 目 の 要 素 を 
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<input type="button" value=" 結 合 " onclick="c7a7ge477ay(3) " /></td> 
</tr> 
<tr> 

<td colspan="2"> の 

















<input type="text" name="sfg/7W772" size="3" /> 番 目 の 要 素 を 要素 の 文 
字 列 に 
<input type="button" value=" 置 換 " oncick="c7a7ge477gy(4) " /></td> 
</tr> 
</table> 
<table> 


<tr> <th> 配 列 1</th><th> 配 列 2</th></tr> 
<tr><td><textarea name="o/ の 77" rows="6" cols="20" 
disabled="disabled"></textarea></td> 
<td><textarea name= "og の 72" rows="6" cols="20" 
disabled="disabled"></textarea></td></tr> 
</table> 
</form> 
</body> 








ド HP whoelsharco D - 叶 で | 本 を @ い た い 





| | ト [| 刻 目 の 要素 を 
Ei 


番目 の 要素 を 要素 の 文字 列 に 






[追加 ボタ ン で 配列 1 と 配列 2 に 要素 を 配置 し た 状態 配列 1 に 配列 2 の すべ て の 要素 を 結合 し ます 
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処理 内容 
の 先頭 に 要素 を | 通 加 
の 最後 尾 の 要素 を | 削除 | 


5 癌 
| 5 上 肖 必 


の [2 証 目 の 要素 を 要素 の 文字 列 に 
) 





配置 1 に 配列 2 の 2-3 番 目 の 要 素 を 結合 し ます Ma 
換 し ま 


・… P168 slice メソ ッ ド 
P170 splice メソ ッ ド 
P170 join メソ ッ ド 
ー P174 





過 朋 : 参 Array オブ ジェ クト … P174 
n POP メソ ッ ド ……・ 

unshift メソ > 

concat メソ ッ ド 





…P174 
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の dl 本 基き 半 ら り 





ト う 








|DATEO1 5 2 
日 付 や 時 刻 を 扱い た い 


文 = neW Date() 日 付 の オブ ジェ クト を 作成 





友 …… 新 し い 日 付 の オブ ジェ クト 
設定 する 日 時 【 省 略 可 】 





オブ ジェ クト 





日 付 や 時 刻 を 扱う に は 、new ス テー トメ ント (p.039) を 使用 し て 、Date( 日 付 ) オ ブ ジ ェ ク 
ト を 作成 し ます 。Date オ ブ ジ ェクト を 使う と 、 現 在 の 年 月 日 や 時 刻 を 表示 し た り 、 指 定 し た 
日 付 まで の 日 数 を 調べ た りす る こと が で きま す 。 

特定 の 日 付 や 時 刻 を 持っ た Date オ ブ ジ ェクト を 作成 する 場合 は 日 付 を 表す 文字 列 
("1987/1/4" り an 4.1987" な ど ) を 引数 と し て 多 に 指定 する の が 一 般 的 で す 。 こ の 文字 列 は 
parse メ ソ ッ ド (DP.200) で 認識 可能 な 日 時 を 表す も の で す 。 そ の ほか の 方 法 と し て 、1970 年 1 
月 1 日 00:00:00(UTC) か ら の ミリ 秒 を 表す 整数 値 を 引数 と する 方 法 、4 桁 の 年 、 月 (0~11)、 
日 ~31)、 時 (0 一 23)、 分 (0~59)、 秒 (0 こ 59)、 ミ リ 秒 (0~ こ 999) を 「.」( カン マ ) で 区 切っ 
た year, month, day, [hours, minutes, seconds, ms]([] 内 は 省略 可 ) の 形式 を 引数 と する 方 
法 が あり ます 。 

な お 、 引 数 を 省略 する と 、 現 在 の 日 付 と 時 刻 に 設定 され ます 。 


9gy = new Date(1998, 11, 31, 1, 2, 3, 456): 


1998 年 12 月 31 日 1 時 2 分 3 秒 456 ミ リ 秒 を 値 と する Date オ ブ ジ ェクト gay を 作成 し ます 。 





の gy = new Date(915030000000): 
915030000000 を 値 と する Date オ ブ ジ ェクト day を 作成 し ます 。 





と ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera iOS6 Android 
〇 ME 島 (69 〇 ( 仙 ) 〇 【 側 () 


\ ソ に し 、 ソ ソ い 


参照 (基礎 編 ) オブ ジェ クト を 扱う ・‥・・・・P037 
ピ 師 【SAMPLE】 カ レン ダー を 作成 する ・P194 
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IDATE02 "= 。 5 還 還 還 EE 
日 付 を 設定 し た い 


文 .SetFullYear( ) < 衝 の 本 還 を 証 





て 則 吉 Gt 計 四 ヽ と せら 中 思 状 型 さ 二 還 NN 





太 .setYear(^) 本 居 を 設定 

文 .setMonth(@) 月 を 設定 

文 .SetDate ( 画 ) 日 を 設定 

Date キ フジ ェ ッ ト @… 月 (0-11) ー た | 
4 桁 の 森 年 画 … 日 131) い | 
^…… 西 暦年 | 
メソ ッ ド | 


Date オ ブ ジ ェクト の 日 付 を 設定 する メソ ッ ド で す 。 
setFullYear メ ソ ッ ド 

4 桁 の 西暦 を 設定 し ます 。 
setYear メ ソ ッ ド 

西暦 を 設定 し ます 。getYear メ ソ ッ ド (p.196) と 同様 に ブラ ウザ の 種類 や 機種 に よっ て 結果 
が 異な る 場合 が ある の で 、setFullYear メ ソ ッ ド を 使用 し た 方 が よい で し よう 。 
setMonth メ ソ ッ ド 

月 を 設定 し ます 。 設定 する 際 は 実際 より 1 小さ い 値 を 指定 し ます (1 月 =0、 …… 、12 月 =11)。 
setDate メ ソ ッ ド 

日 を 設定 し ます 。 





7 の a7e.setFulIYear(2008): 


年 を 2008 年 に 設定 し ます 。 
77y の ag7e.setDate(document.7p7777. の Value): 
日 を form1 の d の 値 に 設定 し ます 。 














p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
O O O O O O (の O 〇 
参照 日 付 を 取得 し た い ・・・・・・ バ ーー・ P182 【SAMPLE】 カ レン ダー を 作成 する ・‥…・・・ P194 
が 時 刻 を 設定 し た い ・ ーーー ドー P184 
時 刻 を 取得 し た い ……… バ ーー P185 
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CAEE 油 議 議 議 議 較 議 議 べべ ね 
日 付 を 取得 し た い 


= 婦 .getFulLYear() 5 の 本 礎 を 返 す 
= 誠 .getYear() 村 を 返す 

= x.getMonth() 月 を 返す (011) 

= 誠 .getDate() 日 を 返す 131) 
= 文 .getDay( ) 訣 日 を 返す (0: 日 -6) 








配 E メソ ッ ド 





Date オ ブ ジ ェクト の 日 付 や 曜日 を 参照 する メソ ッ ド で す 。 


getFullYear メ ソ ッ ド 
4 桁 の 西暦 返し ます 。 


getYear メ ソ ッ ド 

西暦 か ら 1900 を 引い た 値 (1977 年 な ら 7Z) を 返し ます 。 た だ し 、2000 年 を 超え た 場合 は ブ 
ラウ ザ や 機種 に よっ て 4 桁 の 値 (2000 年 な ら 2000) を 返す も の と 、1900 を 引い た 値 (2000 年 
な ら 100) を 返す も の が あり ます 。 古い ブラ ウザ で は 対応 し て いま せん が 、 年 を 扱う 際 に は 4 桁 
の 西暦 を 返す getFullYear メ ソ ッ ド を 使用 し た 方 が よい で し ょ う 。 


etMonth メ ソ ッ ド 
月 を 返し ます 。getMonth メ ソ ッ ド で 返さ れる 値 は 、 実際 の 月 より も 1 小さ い 値 (1 月 =0、2 
月 =1、3 月 =2、…… 、12 月 =11) と な る こと に 注意 し て くだ さい 。 


getDate メ ソ ッ ド 

日 を 返し ます 。 
getDay メ ソ ッ ド 

曜日 を 返し ます 。getDay メ ソ ッ ド で 返さ れる 曜日 は 0 か ら 6 の 範囲 の 値 ( 日 曜 =0、 月 曜 =1、 
22c029 、 土 曜 =6) に な り ま す 。 曜 日 を 表示 する 際 に は 、 曜 日 の 文字 列 を あら か じ め 配 列 に 設定 し 、 
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配列 の イン デック ス 番 号 と し て 曜日 の 値 を 指定 する の が 一 般 的 で す 。 












妨 e/ ル ear = 7 の W.detFullYear(): 
現在 の 西暦 を 4 桁 で 取得 し 、 変 数 theFYear に 代入 し ます 。 






娘 e7ea7 = oy.detYear(): 
現在 の 西暦 を 取得 し 、 変 数 theYear に 代入 し ます 。 


document.write(" 今 は " + (7ow.getMonth()+1) + "月 で す 『): 
現在 の 月 を 表示 し ます 。 


alert(" 今 日 は " + 7ow.getDate() + "日 。『): 
現在 の 日 を ダイ アロ グ に 表示 し ます 。 


娘 e/a7e =7ow.qetDay() 
現在 の 曜日 の 数 値 を 取得 し 、 変 数 theDate に 代入 し ます 。 


妨 eMee ん = new ArraV( 日 "月 TP 光村 金 " 叶 土 "9: 
妨 e/a7e = 妨 eMee ん [7ow.getDay()]: 

現在 の 曜日 の 数 値 を 取得 し 、 配 列 theWeek か ら 該当 する 曜日 を 取得 し て 変数 theDate に 代入 し 
ます 。 
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時 刻 を 設定 し た い 








た .setHours( 時 を 設定 

文 .setMinutes(^4 秒 を 設定 

文 .setSeconds(@ 分 を 設定 

文 .setMilliseconds( 一 ) 。 ミ り se 

衣 ……Date オ ブ ジ ェクト @… 秒 (0-59) 

る … 時 (0ー23) 還 …- ミ リ 秒 (0 一 999) 
^…- 分 059) 

茹 提 メソ ッ ド 





Date オ ブ ジ ェクト の 時 刻 を 設定 し ます 。 引 数 に は 任意 の 時 、 分 、 秒 、 ミ リ 秒 (1000 分 の 1 
秒 ) を 数 値 ま た は 数 式 で 設定 し ます 。 こ れ ら の メソ ッ ド で 設定 し た 時 刻 は シス テム (PC) の 時 計 
に は 影響 を 与え ませ ん 。 


7 ル 7777e.setHours(23): 
時 刻 (時 ) を 23 時 に 設定 し ます 。 


の 7777e.setMinutes(23): 
時 刻 ( 分 ) を 23 分 に 設定 し ます 。 


77 ル 77776.sSetSeconds(23): 
時 刻 ( 秒 ) を 23 秒 に 設定 し ます 。 


7y777e.setMilliseconds(23): 
時 刻 ( ミ リ 秒 ) を 0.023 秒 に 設定 し ます 。 











> ブラ ウザ 対応 表 IE10 1 3:) Fx Chrome Safari Opera iOS6 Android 





〇 〇 〇 紅 ) () 〇 〇 〇 (⑳! 
上 参照 日 付 を 設定 し た い ・…・…・・ ーー・P181 
ロ 日 付 を 取得 し た い ・・…・ーーーーーーー・P182 
時 刻 を 取得 し た い ・・ ーー P185 
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IDATEOD "= = 2 還 還 還 還 還 還 還 還 還 
時 刻 を 取得 し た い 


= 文 .getHours() 時 を 返す (023) 
人 = 文 .getMinutes 分 を 返す (0-59) 
= 文 .qetSeconds 秒 を 返す (059) 
= 誠 . BIAUERISIRR ミリ 秒 を 返す (0999) 


結果 を 格納 する 変数 
衣 ……Date オ ブ ジ ェクト 








メソ ッ ド 





現在 の 時 刻 を 求め る メソ ッ ド で す 。 getMilliseconds メ ソ ッ ド は ミリ 秒 の 値 を 0ー999 の 数 
値 で 返し ます 。 


document.write(" 今 、" +7ow.qetHours()+ "時 " +7gw.getMinutes() + "分 で す 。『): 
現在 時 刻 (時 と 分 ) を 書き 出し ます 。 


5 = 7 の W.getSeconds(): 
現在 時 刻 ( 秒 ) を 取得 し 、 変数 s に 代入 し ます 。 


77s = 7 の.detMilHiSeconds(): 
現在 時 刻 ( ミ リ 秒 ) を 取得 し 、 変 数 ms に 代入 し ます 。 








ょ ブラ ウザ 対応 表 IE10 1 |:】 Fx Chrome Safari Opera iOS6 Android 
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M 参照 最新 日 を 自重 的 に 揮 和 したい PO59 時 刻 を 設定 し た い ・…・ バ ーー P184 

IT 日 付 を 設定 し た い ・・・・・ ーー P181 さま ざま な 形式 で 日 付 を 表示 し た い ・・・・・…・ P188 

日 付 を 取得 し た い ーー ドー 「P182 【SAMPLE】 来 年 まで の 時 間 を カウ ント ダウ ン す る ・・P196 
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DATE.06 


指定 し た 時 間 ま で の 
経過 秒 数 を 求め た い 


〇 = 護 .getTime() 現在 時 刻ま で の ミリ 秒 を 返す 
〇 = Date.parse() 指定 日 時 まで の ミリ 秒 を 返す 


〇 = Date.UTC(^, @, 回 マ , ぐ 〇 ))  # 昌 時 まで の ミリ 秒 を 返す 





O' 結果 を 格納 する 変数 

娘 ……Date オ ブ ジ ェクト 

ぐる … 日 付 文字 列 ("1977/1/4" な ど ) 
ム ……4 桁 の 西暦 (1970 よ り 大 きい 値 ) 





@… 月 (0-11) 
田 … 日 (1-31) 
ヤー 時 (0 て 23) 
jk 分 (0~59) 
の 秒 (0~-59) 
メソ ッ ド 


2 


いずれ も 1970 年 1 月 1 日 午前 0 時 か ら の 経過 秒 数 を ミリ 秒 で 返す メソ ッ ド で す が 、 対 象 と な 
る 日 付 の 指定 方 法 が 異な り ます 。 


getTime メ ソ ッ ド 
Date オ ブ ジ ェクト を 対象 と し ます 。 


Parse メ ソ ッ ド 
日 付 を 表す 文字 列 ("1977/1/4"、"an 4, 1997" な ど ) で 指定 し た 日 時 を 対象 と し ます 。 


UTC メソ ッ ド 

4 桁 の 西暦 、 月 、 日 、 時 、 分 、 秒 を それ ぞ れ 「,]( カ ンマ ) で 区 切っ て 指定 し た 日 時 を 対象 と し 
ます 。 月 を 設定 する 際 は 、 実際 より 1 小さ い 値 (1 月 =0、2 月 =1、…… 、12 月 =11) を 指定 し 
ます 。 
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7 = 7ogy.getTime(): 
1970 年 1 月 1 日 午前 0 時 か ら 現 在 時 刻ま で の 経過 秒 数 を ミリ 秒 で 取得 し 、ms に 代入 し ます 。 


が ye = /a7e.Parse("2010/8/31"): 
1970 年 1 月 1 日 午前 0 時 か ら 2010 年 8 月 31 日 まで の 経過 秒 数 を ミリ 秒 で 取得 し 、 変数 time に 代入 
し ます 。 


が ye = /a7e.UTC(2010, 7, 31, 23, 59, 59): 
1970 年 1 月 1 日 午前 0 時 か ら 2010 年 8 月 31 日 23 時 59 分 59 秒 まで の 経過 秒 数 を ミリ 秒 で 取得 し 、 変 数 
time に 代入 し ます 。 
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参照 】 [SAMPLE】 来 年 まで の 時 間 を カウ ント ダウ ン す る ・・ P196 
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IDATE07 = "= 。 25 還 還 E 
さま ざま な 形式 で 日 付 を 表示 し た い 


人 = 誠 .toGMTStrinq() グリ ニッ ジ 標 準 時 で 返す 
= 婦 .toLocaleString () ロー カル meigy 
= 婦 .toUTCStrinq() 協定 世界 時 で 返す 





太 ……Date オ ブ ジ ェクト 
全 結果 を 格納 する 変数 





メソ ッ ド 





文 で 指定 され た Date オ ブ ジ ェクト を さま ざま な 形 の 日 付 文字 列 で 返し ます 。 これ ら の メソ 
ッ ド は 、 ブ フラ ウザ や その バー ジョ ン 、 お よび シス テム (PC) の 設定 に よっ て 返さ れる 文字 列 の 
形式 が 異な り ま す 。 な お 、 ロ ー カ ル 時 と は シス テム (PC) に 設定 され て いる 地域 の 時 刻 で す 。 





windowstatus(" グ リ ニ ッ ジ 標 準 時 : " + 7ow.toGMTString()): 
ステ ー タ スパ ー に グリ ニッ ジ 標 準 時 を 表示 し ます 。 


(5 か = 7ow.toLocaleString(): 
ロー カル 時 を 変数 lstr に 代入 し ます 。 


document.getElementById( "og の /7").value = 7ow.toUTCString(): 
協定 世界 時 を ID 名 output の 値 に し ます 。 

















Column 協定 世界 時 と は 

全 世 界 で 時 刻 を 記録 する 際 に 使わ れる 公式 な 時 刻 で す 。 天体 観測 を 元 に 定め られ る GMT( グ 
リ ニ ッ ジ 標 準 時 ) と ほぼ 同じ で す が 、 セ シウム 原子 時 計 で 計測 し た 時 間 ( 国 際 原 子 時 ) と GMT の 
差 が 0.9 秒 以内 に な る よう 人 工 的 に 調整 され て お り 、 世界 共通 の 標準 時 と な っ て いま す 。 
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O O @ O 〇 〇 〇 O 〇 O 
| 照 日 付 を 取得 し た い ・-・・・ Oi ・・・・P182 [SAMPLE】 来 年 まで の 時 間 を カウ ント ダウ ン す る ・・ P196 
ジ バ 時 刻 を 取得 し た い ーー ーー・P185 
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協定 世界 時 で 設定 し た い 





婦 .setUTCFulLYear() 協定 世 界 時 の 4 桁 の 本 大 で 設 
文 .setUTCMonth(^) 協定 人 界 時 の 月 で 設定 
文 .setUTCDate (@) 人 定 世界 時 の 日 で 設定 
文 .SetUTCHours( 画 ) 人 定 人 界 時 の 時 で 設定 

娘 .setUTCMinutes( マ 人 定 界 時 の 分 で 設定 

娘 .setUTCSeconds( 六 協定 人 界 時 の 秒 で 設定 

文 .setUTCMilliseconds( 〇 ) 協定 人 界 時 の さり 秒 で 設定 
0te オ フシ クト 。。。 moD 
4 桁 の 西暦 年 マ …… 分 (0 一 59) 

^… 月 (0-11) 冶 … 秒 (0-59) 

@… 日 3 、 ミリ 秒 (0~999) 

メソ ッ ド 





協定 世界 時 で 設定 する メソ ッ ド で す 。setUTCMonth メ ソ ッ ド で は 、 設 定 する 月 に は 実際 よ 
り 1 小 さい 値 を 設定 し ます (1 月 =0、2 月 =1、…… 、12 月 11)。 





afe.setUTCFulLYear(2013): 

協定 世界 時 の 年 を 2013 年 に 設定 し ます 。 
ya7e.setUTCMonth(11): 

協定 世界 時 の 月 を 12 月 に 設定 し ます 。 
yafe.setUTCDate(document.7o/777.7.value ): 

協定 世界 時 の 日 を form1 の d の 値 に 設定 し ます 。 
7afe.setUTCHours(23): 協定 世界 時 の 時 を 23 時 に 設定 し ます 。 
ya7e.setUTCMilliseconds(23): 協定 世界 時 の ミリ 秒 を 0.023 秒 に 設定 し ます 。 





ょ ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 〇 〇 O 〇 O 〇 〇 


上 参照 さま ざま な 形式 で 日 付 を 表示 し た い ・・・・・・・ P188 
いい 協定 世界 時 で 表示 し た たい - P190 
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r*C 合 納 人 因 鞍 叶 合 時 へ 

















IDATEO9。。。。 22 
協定 世界 時 で 表示 し た い | 


人 = 婦 .getUTCFulLYear() 協定 世界 時 の 4 桁 の 西暦 で 返す 
= 婦 .getUTCMonth() 協定 世界 時 の 月 で 返す 
= 誠 .getUTCDate () 協定 世界 時 の 日 返す 

人 = 婦 .getUTCDay() 協定 世界 時 の 曜日 で 返す 
= 誠 .getUTCHours() 協定 人 界 時 の 時 で 返す 

= 文 .qetUTCMinutes 協定 他界 時 の 分 で 返す 
= 文 .qgetUTCSeconds 協定 他界 時 の 秒 で 返す 


多 = 婦 .detUTCMilliseconds ( ) 。 59 連 の ミリ で 返す 
= 婦 .detTimezoneOff set ( ) ま 9 半 と の 時 で 返す 





文 ……Date オ ブ ジ ェクト 
金 …- 結 果 を 格納 する 変数 





メソ ッ ド 





協定 世界 時 の 西暦 や 月 な ど を 調べ る メソ ッ ド で す 。 


getUTCMonth メ ソ ッ ド 
協定 世界 時 の 月 で 返し ます 。 た だ し 、 返 され る 値 は 実際 の 月 より も 1 小さ い 値 (1 月 =0、2 月 
人 et 、12 月 =11) と な る こと に 注意 し て くだ さい 。 


getUTCDay メ ソ ッ ド 

協定 世界 時 の 曜日 で 返し ます 。 返さ れる 曜日 は 0 か ら 6 の 範囲 の 値 (日 曜 =0、 月 曜 =1、…… R 
土曜 6) に な り ま す 。 曜日 を 表示 する 際 に は 、 曜 日 の 文字 列 を あら か じ め 配 列 に 設定 し 、 配 列 
の イン デック ス 番 号 と し て 曜日 の 値 を 指定 する の が 一 般 的 で す 。 


getTimezoneOff set メ ソ ッ ド 
協定 世界 時 と の 時 差 を 分 単位 で 返し ます 。 た だ し 、 ブ ラウ ザ や OS の 種類 に よっ て は 正確 な 
値 が 返さ ぐさ れ な い 場 合 が あり ます 。 


190 | DATE.09 


| 協 

= oggetUTCFullYear(): | 定 
刀 = fogagygetUTCMonth()+1: 世 
の = 7ogay.getUTCDate (): 円 
document.write( ル + "年 "+ カ + リ 月 "+ の + リ 日 7): で 
現在 の 協定 世界 時 の 西暦 、 月 、 日 を それ ぞ れ 変数 fy、m、d に 代入 し 、 表示 し ます 。 表 
示 

娘 eiMeek = new Array(" 日 "月 水木" 金 の 土 "): | し 
妨 e/a7e = 妨 eeek [7ow.getUTCDay()]: | 軸 


現在 の 協定 世界 時 に お ける 曜日 の 数 値 を 取得 し 、 配 列 theVWWeek か ら 該 当 する 曜日 を 取得 し て 変 
数 theDate に 代入 し ます 。 


/ =fogay.qetUTCHours(): 
如 = fo9gy.getUTCMinutes(): 
s = 7ogagy.getUTCSeconds(): 
77s = 7 の ggy.getUTCMilliseconds(): | 
o な 7 = 7oay.detTimezoneOffset(): | 
alert( カ + "時 "+ の + リ 分 "リキ s+" 秒 り +75+ 時差"+ o+ "分"): 
現在 の 協定 世界 時 の 時 、 分 、 秒 、 ミ リ 秒 、 時 差 を それ ぞ れ 変数 に 代入 し 、 ダ イア ログ に 表示 し ま 
す 。 











p ブラ ウザ 対応 表 IE10 |) 3:] Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 O 〇 O O 〇 O O O 〇 O 〇 O 


参照 さま ざま な 形式 で 日 付 を 表示 し た い ・・……・ P188 
遇 / 定 世界 時 で 設定 し た い ・・ーーーーー P189 
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DATE.SAMPLE-01 


さま ざま な 形式 で 
現在 時 刻 を 表示 する 


さま ざま な 形式 で 現在 時 刻 を 表示 する サン ブル で す 。 ペ ー ジ 読み 込み 時 に タイ マー を セッ ト 
し 、1 秒 ご と に 表示 を 更新 し ます 。 





// 様 々 な 形式 で 日 時 を 表示 する 関数 

function s/ow777e り { 
Var 7o/77Z7e77 = document.getElementById( "7777"): 
7ogy = new Date(): 
7o/77E/e77.07 の 77.value = 7oagy.toGMTString(): 


fo777E/e77.07 の /72.value = 7ogay.toUTCString(): 
7777E/e77.07 の // ヲ .Value = fogay.toLocaleString(): 








<body id="body" onload="setInterval('s7ow777e( り 「,1000) "><!-onload 属 性 に タイ 
』 マー を セッ ト -> 
<form action="" id="7/777"> 
<D> 
ク グリニッジ 標 準 時 : <1nput type="text" name="o/ の 77" size="35" /><br /> 
六 定 世界 時 (UTC) : <input type="text" name="o/ の 72" size="35" /><br /> 
ー カ ル 時 (地域 ) : <1nput type="text" name="o/ の 3" size="35" /> 
</D> 
</form> 
</body>s 
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【 Firefox 


Internet Exp 










選 別人 き http//wwshoeisha.cq < 回 〇 | 人 柏 々 な 形式 で 日 時 を 表 .… 


グリ ニッ ジ 標 準 時 :|Fr. 10 May 2013 13-07:10 UTC 


協定 世界 時 (UTC) :|Fn. 10 May 2013 13:07:10 UTC 


ロー カル 時 (地域) :[2013 年 5 月 10 日 22-07:10 



















各種 形式 で 現在 の 時 刻 を 1 秒 ご と に 表示 し ます (ブラ ウザ に よっ て 形式 が 異な り ます ) 


Firefox マ 
[様々 な 形式 で 日 時 を 表示 し た い 
を ざ www.shoeisha.com/bo ご 岡 -cooog の | 明 合 困 ・ 








グリ ニッ ジ 標 準 時 :|Fri 1o May 2o13 1307:29 GMT 
協定 世界 時 (UTC) : Fri 10 May 2018 13.0729 GMT 
ロー カル 時 (地域 ) : 2o13 年 5 月 10 日 2207:29 








っ 3 照 toGMTString メソ ッ ド ーーー 】 
レネ ム toLocaleString メソ ッ ド . 





人 O 久 CCSHTIRESASACIRSSAGcRcisRomao0i2o . 
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DATE.SAMPLE-02 


カレ ンダ ー を 作成 する 





カレ ンダ ー を 作成 する サン プル で す 。 ま ず 、 現在 の 日 付 を 取得 し 、 年 と 月 を 参照 し ます 。 各 
月 の 日 数 は 、 日 に 31 ま で の 値 を 設定 し て 日 付け ブ ジ ェクト を 作成 し 、 月 が 変わ ら な い 値 を 見 
つけ る こと で 確認 で きま す 。 た と えば 「new Date("2008""1""32") 」( 2008 年 1 月 32 日 ) と 指 
定 し て 日 付す オブ ジェ クト を 作成 する と 2008 年 2 月 1 日 と な り ま す 。 

さら に 、 取 得 し た 情報 を 元 に 変数 html に HTML と その 内 容 を 付け 足し て いき ます 。 最後 に 
作成 し た HTML を innerHTML で <body> タ グ の 中 に 挿入 し て 完成 で す 。 





Var gd/: // 変 数 の 宣言 年 
Var 7777 // 月 


Var 77ax/a7e: // 日 の 上 限 
Var の gy4/7gy = new Array(" 日 月" 炎 水 P 木 "" 金 "" 土 "): // 曜 日 の 配列 
Var co9e = "": // カ レン ダー 作成 の た め の html コ ー ド を 代入 し て いく ぐ 変 数 





// 今 月 の カレ ンダ ー を 作成 する 関数 
function cg/e7ga/(){ 
Var 7 のみ ag7e = new Date(): // 現 在 の 日 付 を 取得 
Jeg/ = 7 の ag7e.detFulLYear(): //4 桁 の 年 を 取得 
77 の 7 = 7 の gze.qetMonth(): // 月 を 取得 
for (var7 = 27: 7 <= 31: な +) 人 { // 今 月 の 日 の 上 限 を 取得 する 


Var c77ec ん = new Date(yea/,77 の 7 //27 か ら 31 ま で の 数 字 を セッ ト し て 日 付 を 作成 
if (cec.getMonth() == 7o7){ 
変数 check が 日 付 と し て 正しけれ ば 変数 maxDate に 変数 i の 値 を 代入 
77gX/a7e = iz 
}else{ 
break: 
} 


} 

co の e += "<p><b>" + Wear/+ "年 "+ (7 の 7+1) + "月 </b></p> リ : 

CO の e += "<table><> リ > 

for(var7 = 0: 7 < の gy4/7gy.length: なれ +){  // 訣 日 の 見 出し 部 分 の html 作 成 
co7e += "<td>" + ggy47gy/7 ガ + "</td> 

} 

CO の e += "</ 全 ><tr> リ > 

Var 87e = new /aze(eg//77 の 7,1): // 今 月 の 1 日 の 日 付 を 取得 

for(var7 = 0: 7 < ge.getDay(): な +){  //1 日 の 曜日 まで の 空欄 部 分 を 作成 
COe += "<td></td>"x 
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軌 


























カ 
for(var7 = 1:7 <= 77ax/a7e: 7++) {  // 日 に ち (1 一 maxDate) 部 分 の 作成 レ 
守 (g7e.getDay() == 0 &&7 != 1){ // 日 に ちの 曜日 が 日 曜日 に な っ た ら 次 の 行 へ ジン | 
Code += "</> く tr> リ s ィ | 
} を [ 
CO9e += "<td>"+ ォ チェ ォ リ </td> "> // 日 に ち 部 分 作成 作 | 
gg7e.setDate(a7e.qetDate() + 1): // 変 数 date の 日 付 を 1 日 進め る 成 
if(7⑰ == ax の afe){  // 最 終日 以降 まで の 空欄 部 分 を 作成 


while(age.getDay() != 0){ 
coe += "<td></td> "2 
gag7e.setDate(gag7e.getDate() + 1): 
} 
} 
} 


CO9e += "</ 人 > マ </table>"? 
document.qetElementById("body").innerHTML = coge: 
/body タ グ 内 に 作成 し た html を 挿入 





<body id="body" onload="ca/ega7() "> 
</bodV> 










Internet Exp 








を 人 http://www shoeisha.cn  ・ 品 G | 人 ほ カル レン ダー を 作成 し た い 
2013 年 月 


日 月 火 水木 金 土 

が 8 
S67891011 
12 13 14 15 16 17 18 
19 20 21 22 23 24 25 
26 27 28 29 30 31 


























その 月 の カレ ンダ ー が 表示 され ます 








| 装 照 の 203 に い に 3 や 2 P182 
| getMonth メソ ッ ド -・ ー P182 setFullYear メソ ッ ド "PH81 
4 に KeC22 誰が Seo 02 P181 
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DATE.SAMPLE-03 


来年 まで の 時 間 を 
カウ ント ダウ ン す る 





来年 まで の 時 間 を カウ ント ダウ ン す る サン ブル で す 。 ペ ー ジ が 読み 込ま れる と <body> タ 
グ の onload 属 性 に 指定 され た タイ マー を セッ ト し 、1 秒 ご と に countDown 関 数 を 呼び 出し ま 
す 。 こ の 関数 は 現在 の 時 間 か ら 指定 時 間 ( 来 年 の 1 月 1 日 0 時 0 分 0 秒 ) ま で の 時 間 を 計算 し ます 。 
Date.UTC( 指 定時 間 )-Date.UTC( 現 在 時 間 ) で 指定 時 間 ま で の 時 間 を ミリ 秒 単位 で 取得 し 、 取 
得 し た 値 か ら そ れ ぞ れ 日 数 、 時 間 、 分 、 秒 を 割り 出し て 表示 し ます 。1 秒 ご と に 更新 され る の 
で カウ ント ダウ ン の よう に な り ま す 。 





// 来 年 まで の 時 間 を 計算 する 関数 
function cog77 の gw7(){ 
Var 7 の ggy = new Date (): // 現 在 時 間 を 取得 
Var yeg7 = 7 の gy.getFullYear():  // 年 、 月 、 日 、 時 間 、 分 、 秒 を それ ぞ れ 取得 
Var 7 の 7 妨 = 7 の gy.getMonth(): 
Var 9g7e = togay.getDate(): 
Var gg7 = 799gy.getHours(): 
Var 功 如 /fe = 7oggy.getMinutes(): 
Var seco7 = 7 の gy.qetSeconds(): 
Var 775ec = の aze.UTC((year + 1), 0, 1, 0, 0, 0) - /g7e.UTC(yea/, 77o7 妨 , ge, 
7, 切 加 7@, Sec の 7 の ): // 来 年 まで の ミリ 秒 数 を 取得 
Var sec = /7Sec / 1000: // 取 得 し た ミリ 秒 数 か ら 日 数 、 時 間 、 分 、 秒 を 割り 出す 
Vars=sec % 60: // 秒 
Var 切 77 = (sec - 5) / 60: 
var77=7777 % 60:/ 分 
Var 9 の = (万 娘 - 軍 ) / 60: 
Var カ = /o/ % 60: // 時 間 
Var の = (7o/ - 万 ) / 24: // 日 数 
document.getElementById(" の ae").Vvalue = の : // 画 面 へ 表示 
document.qetElementById( "og/").value = 
document.getElementById( "7 如 fe").value = 万 : 
document.getElementById("seco7g").value = s: 
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<body onload="setInterval('cog74 の ow7(),1000) "> 
<form action="" id=""> 
<D テ > 
来年 まで あと 
<input type="text" id=" の agfe" size="3" /> 
<input type="text" id="7o//" size="3" /> 時 間 
<input type="text" id="77 罰 fg" size="3" /> 分 
<input type="text" id="seco7" size="3" /> 秒 で す 。 
</D> 
</form> 














































来年 まで あと [235 



























来年 まで の 時 間 が カウ ント ダウ ン さ れ ま す 





| 参 照 getHours メソ ッ ド 
ロ getMinutes メソ ッ ド ・ 


は に Sai20GOFY2 に P185 
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ISTRNGO1 5 =… 5 還 還 還 還 還 還 還 還 還 還 
文字 列 を 扱い た い 


文 = heW String() String オ ブ ジ ェクト を 作成 
文 .lenqgth 文字 列 の 長 さ を 参照 








オブ ジェ クト (String)、 プ ロバ ティ (length) 





文字 列 (String オ ブ ジ ェクト ) は 文字 列 を 扱う オブ ジェ クト で す 。 色 や サイ ズ の 変更 、 各 種 の 
修飾 、 文 字 の 検索 や 抜き 出し な ど 、 文 字 列 を 操作 で きま す 。 


String オ ブ ジ ェクト 

String オ ブ ジ ェクト を 明示 的 に 作成 する に は 、new ス テー トメ ント (p.037) を 使用 し ます 。 
た だ し 、 こ の よう に new ス テー トメ ント を 使用 し て String オ ブ ジ ェクト を 作成 する こと は 少な 
く 、 通 常 は 変数 の 値 に 文字 列 を 代入 する な ど で 作 成 し ま す 。 文字 列 は 「"」( ダ ブル クオ ォ ー テ ー 
ショ ン ) ま た は [「"」( シ ング ルク オー テー ショ ン ) で 囲ん で 記述 し ます 。 


length プ ロ パ ティ 
文字 列 の 長 さ を 調べ ます 。 


s な = new String("Hello"): 
文字 列 Hello! を String オ ブ ジ ェクト str と し て 作成 し ます 。str = "Hello': と 記述 し て も 同じ で す 。 


5 な = new String(2007): 
数 値 2007 を String オ ブ ジ ェクト str と し て 作成 し ます 。 


myStr = s な length: 
String オ ブ ジ ェクト str の 長 さ を 調べ て 変数 myStr に 代入 し ます 。 








と ブラ ウザ 対応 表 IE1O IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O O 9 O O O O O 


中 胡 参 (基礎 編 ) オブ ジェ クト を 扱う P037 
名 
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|STRING02 "= = 22 還 還 還 還 還 還 還 還 還 還 


文字 列 に リン ク や アン カー を 
設定 し た い 


@ = xx.iink($) 


ここ ン Gt き 央 


ラ 
こ 
さ 
R 
還 
衝 











ーー 

@ = 文 .anChOr(^ ) アン カー 設定 列 
時 ーー 回 た まき 暫 
@…HTML/XHTML タ グ が 付加 され た 文字 列 ン 
衣 ……String オ ブ ジ ェクト ク 
$…-URI や 
^…… ア ンカ ー 名 / 
ン 

メソ ッ ド \f 
を 

指定 し た 文字 列 に リン ク や アン カー 名 を 設定 する メソ ッ ド で す 。 こ れ ら の メソ ッ ド で は 、 結 定 上 

果 と し て 以下 の よう に HTML/XHTML タ グ が 付加 され た 文字 列 を 返し ます 。 
い 


) メソ ッ ド に よっ て 返さ れる 文字 列 





document.write(" 株 式 会 社 翔 泳社 ".Hink("http://wwwshoeisha.cojp/『)): 
文字 列 「 株 式 会 社 翔 泳社 」 に リン ク を 設定 し て 表示 し ます 。 


document.write("CONTENTS".anchor("contents")): 
文字 列 CONTENTS に アン カー 名 contents を 設定 し て 表示 し ます 。 





p ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera iOS6 Android 
⑬ 〇 O 〇 〇 〇 O 〇 〇 


大 文字 小文字 に 変換 し た い ・・・・・・ バ ーー P200 
中 参照 2 





STRING.02 | 199 








EIDNERE 玉 議 証 較 較 較 蘭 証 昌 。 {ハー ク ぞ ぴ 〕〔 ぺ ベー 
大 文字 ノ 小 文字 に 変換 し た い 


に に 


@ = 婦 .toUpperCase() に 
| 人 = 文 .toLowerCase() に 





@…… 変 換 さ れ た 文字 列 を 格納 する 変数 
友 ……String オ ブ ジ ェクト 





1 茹 琶 還 メソ ッ ド 
ーーーーーーーーーーーーーーーーーーーーーooooooooooom 


指定 し た 文字 列 に 含ま れる アル ファ ベッ ト を 、 大 文字 また は 小文字 に 揃え ます 。 
通常 、indexOf メ ソ ッ ド (p.202) な ど で 検索 を 行う と き に は 大 文字 と 小文字 が 区 別 さ れ ます 。 
| また 、sort メ ソ ッ ド (p.172) で の 並べ 替え は 文字 コー ド 順 に な る の で 、 小 文字 より 大 文字 の 方 
が 先 に な っ て し まい 、c、B、a、d、E を 並べ 替え る と 、B、E、a、c、 d に な っ て し まい ます 。 
検索 や 並べ 替え を 行う 際 に 大 文字 と 小文字 を 区 別 し な い 場 合 に は 、 あら か じ め toUpperCase 
メソ ッ ド や toLowerCase メ ソ ッ ド で どちら か に 揃え て か ら 実 行 す る と よい で し ょ う 。 


alert(wo77.toUpperCase()): 


String オ ブ ジ ェクト word1 の 値 を 大 文字 に 変換 し 、 ダ イア ログ に 表示 し ます 。 





3 か = Wo72.toLowerCase (): 
String オ ブ ジ ェクト word2 の 値 を 小文字 に 変換 し 、 変 数 str に 代入 し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera iOS6 Android 


〇 〇 人 9] き 〇 〇 〇 〇 





| ビジ 衝 答 デメ 釣 に リン ク や アン カー を 肌 定 し た い ・……・P199 
ジテ デー タ を 並べ 替え た い …………ーーー・P172 
文字 列 を 検索 し た い - -P202 
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文字 列 を 分 割 し た い 


@ = 誠 .split(^) 


結果 を 格納 する 配列 
表 ……String オ ブ ジ ェクト 
2 区 切り 文字 








本 時 メソ ッ ド 





文字 列 を 指定 し た 区 切り 文字 人 で 分 割 し 、 結 果 を 配列 と し て 返す メソ ッ ド で す 。 区 切り 文字 
は 「,.」( カ ンマ ) で ある 必要 は な く 、「/」( ス ラッ シュ ) や 「" "」( 空 白 ) な ど に する こと も 可能 で す 。 


977 = "Aice/Dorothy/Jessica/Mary/Shelley/Vivian".sphit("/"): 
文字 列 「Alice/Dorothy/jessica/Mary/Shelley/Vivian」 を 「/」( スラ ッシュ ) の 部 分 で 区 切り 、 配 
列 girl に 格納 し ます 。 


の ね = 77e77 の eSDt(" 『): 
配列 member の 要素 を 「" "(空白 ) で 区 切り 、 配 列 data に 格納 し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
O O 〇 O 〇 O O 〇 O 〇 O 〇 O 〇 


上 参照 文字 を 抜き 出し た い ……ー ド ドド ーー P204 
ン ム 文字 列 の 結合 や 抜き 出し を 行い た い ・-・・・・-・P205 
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稚 半 









ン rt で 潤 衣 fi 則 於 ヽ 


ご で 悪 ゆ SH 











四 
宮 
列 





ETNGRE 文 較 議 還 議 区 。 {ハー も t ぴ ひ 〔、 
文字 列 を 検索 し た い 


人 @ = 座 .indexOf(, ^) 文字 区 を 検索 
@⑯ = Sd ^ ) 文字 を 後ろ か ら 検索 





ぐ -… 栓 索 文字 列 
^ ム …… 検 索 開始 位置 (数 値 ) 省略 可 】 











文字 列 を 検索 する メソ ッ ド で 、 大 文字 小文字 を 区 別して 検索 で きま す 。 大 文字 / 小 文字 が 
混在 し て いる 場合 は 、 対 象 と な る 文字 列 を あら か じ め toUpperCase、toLowerCase メ ソ ッ 
ド (Dp.200) で 大 文字 また は 小文字 に 揃え て お く と よい で し ょ よう 。 
indexOf メ ソ ッ ド 

文字 列 の 左側 か ら 指 定 し た 文字 列 を 検索 し 、 最初 に 一 致し た 文字 列 の 先頭 位置 を 返し ます 。 
一 致す る 文字 列 が な か っ た 場合 は -1 を 返し ます 。 検索 開始 位置 4 を 指定 し た 場合 は 指定 し た 位 
置 より 後ろ の 部 分 の 文字 列 を 検索 し 、 省 略し た 場合 は 先頭 か ら 検索 し ます 。 先 頭 の 位置 は 0 で す 。 
lastIndexOf メ ソ ッ ド 

文字 列 の 最後 (右側 ) か ら 指定 し た 文字 列 多 を 検索 し 、 最 初 に 一 致し た 文字 列 の 先頭 位置 を 返 
し ます 。 検索 開始 位置 4 を 指定 し た 場合 は 指定 し た 位置 より 前 の 部 分 の 文字 列 に 対し て 検索 し 、 
省略 し た 場合 は 最後 か ら 検索 し ます 。 





77 = "gewurztraminar".index0f("urz"): 

文字 列 gewurztraminar の 左側 か ら 文字 列 urz の 位置 を 検索 し 、n1 に 代入 し ます (n1 の 値 は 3) 。 
72 = "gewurztraminar".index0f("urz",2): 

文字 列 gewurztraminar の 左 の 3 文字 目 か ら 文 字 列 urz の 位置 を 検索 し 、 n2 に 代入 (n2 の 値 は 3)。 
7 ヲ 3 = "gewurztraminar".lastindex0f("urz"): 

文字 列 gewurztraminar の 右側 か ら 文字 列 urz の 位置 を 検索 し 、 変 数 n3 に 代入 し ます (n3 の 値 は 3) 。 








と ブラ ウザ 対応 表 IE10 1 3:】 Fx Chrome Safari Opera IiOS6 Android 
O 〇 O O 〇 O O O O O 
| 参照 文字 列 を 分 割 し た い ーー ー・ P220 【SAMPLE】 文字 列 を 検索 する ・…・・・・・…・・・ P207 
上 | 学 バ 文字 を 抜き 出し た い ・・……・ ーーーー P204 
文字 列 の 結合 や 抜き 出し を 行い た い 2 
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ISTRNG06 ==。。 5 還 還 還 還 還 還 還 還 還 還 
文字 コー ド を 扱い た い 








@ = X.charCodeAt($) 文字 を Unicode の 値 に 変換 
時 = Strind.fromCharCOde (4, ^, .…, 人 ) Unicode の 休 を 文字 に 変換 

@ Unicode の 値 を 格納 する 変数 圏 …Unicode の 値 か ら 得 られ た 文字 列 を 格納 
…… 対 象 と な る 文字 列 する 変数 

ぐる …- 文 字 の 位置 A… 文 字 コ ー ド 

メソ ッ ド 





文字 を Unicode の 値 に 変換 、 ま た は その 逆 を 行う メソ ッ ド で す 。 
charCodeAt メ ソ ッ ド 

文字 列 中 の 指定 し た 位置 に ある 文字 の Unicode の 値 を 返し ます 。 先頭 の 文字 の 参照 番号 は 0 
で す 。 全 角 文 字 も 調べ る こと が で きま す 。 
fromCharCode メ ソ ッ ド 

引数 に 与え た Unicode の 値 人 4 を 文字 に 変換 し ます 。「,」( カ ンマ ) で 区 切っ て 記述 する こと に よ 
り 、 複 数 の 文字 コー ド を 文字 列 に 変換 で きま す 。 


document.write("shiraz".charCodeAt(2)): 


文字 列 shiraz の 3 番目 の 文字 {を Unicode の 値 に 変換 し て 書き 出し ます 。 (結果 は 105)。 
7yC77a/ = String.fromCharCode (ん eyWg77): 
変数 keyNum に 格納 され て いる Unicode の 値 を 文字 に 変換 し て 、 変 数 myChar に 代入 し ます 。 











Column escaDe、unesCape メ ソ ッ ド と の 違い 

文字 と 文字 コー ド の 変換 に つい て は escape、unescape メ ソ ッ ド が あり ます が (p.250)、 こ れ 
ら は 主 に クッ キー や フォ ー ム 送信 の 文字 列 中 の 特殊 文字 や 漢字 の 変換 に 用 いる の に 対し 、 
charCodeAt、fromCharCode メ ソ ッ ド は 、 主 に キー ボー ド の 入力 値 を 調べ る 際 に 使用 し ます 。 
charCodeAt、fromCharCode メ ソ ッ ド は 1 文字 だ け の 変換 、 ア ルフ ァ ベ ッ ト も 変換 で きる と いっ 
た 特徴 が あり ます (escape メ ソ ッ ド で は アル ファ ベッ ト や 数 値 は 変換 され ませ ん )。 







ょ ブラ ウザ 対応 表 IE10 IE9 1 ミ :】 Fx Chrome Safari Opera iOS6 Android 
O 〇 〇 〇 O 〇 O 〇 O (9 〇 O 〇 O 


参照 2 文字 列 を エン コー ドン デコ ー ド し た い ・・・・ P250 
1 
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ン で は で 光 激 守 判 注 


ン と 計ら 計 N テ ー 昌 民放 へ 








|STRNG07 =  。 人 5 還 還 還 還 還 還 還 還 昌明 
文字 を 抜き 出し た い 


に 7 


@ = 文 .charAt( 人) 





@…… 抜 き 出 され た 文字 列 を 格納 する 変数 
衣 ……String オ ブ ジ ェクト 
全文 字 の 位置 





メソ ッ ド 


文字 列 か ら 指定 し た 位置 の 1 文字 を 抜き 出す メソ ッ ド で す 。 先頭 の 文字 の 位置 は 0 で す 。 文 
字 列 から 順 番 に 1 文字 ずつ 文字 を 取り 出し た い 場 合 な ど に 利用 し ます 。 


= "sangiovese": 
Ws =W.CharAt(3): 
文字 列 sangiovese か ら 4 番 目 の 文字 を 抜き 出し て 、 変 数 ws に 代入 し ます (ws の 値 は g)。 


5 か = "chardonnay".charAt(3): 
文字 列 chardonnay か ら 4 番 目 の 文字 を 抜き 出し て 、 変 数 str に 代入 し ます (str の 値 は r)。 








ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 


〇 〇 〇 の 6 〇 〇 [ 遼 〇 


上 参照 文字 列 を 検索 し た い ーーー P202 
ジム 文字 列 の 結合 や 抜き 出し を 行い た い P205 
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と rr で 0W 時 層状 放 


STRING.08 


文字 列 の 結合 や 抜き 出し を 行い た い 


@ = 誠 .concat( ぐ ) 字 多 を 結 

@ = 誠 .Slice( 人 4, へ ) 文字 列 を 範囲 で 抜き 出す 
⑯ = 太 .Substrind (人 , へ ) を 和 で 抜き 出す 
@ = 文 .Substr( 人 4, 一) 文字 列 を 文字 数 で 抜き 出す 





@… 結 果 と し て 得 られ る 文字 列 を 格納 する 変数 
衣 ……String オ ブ ジ ェクト 
全 … 結 合 す る 文字 列 





メソ ッ ド 
文字 列 を 結合 し た り 、 文 字 列 を 抜き 出し た りす る メソ ッ ド で す 。 


concat メ ソ ッ ド 
2 つの 文字 列 ( 婦 と 多 ) を 結合 し ます 。 


slice、substring メ ソ ッ ド 

引数 に 開始 位置 と 終了 位置 を 指定 し て 、 そ の 範囲 内 の 文字 列 を 抜き 出し ます 。slice メ ソ ッ 
ド で は 終了 位置 に 負 の 数 を 使用 し 、 未 尾 か ら 数 えた 位置 を 指定 する こと も 可能 で す 。 
substring メ ソ ッ ド で は へ と 4 の 順番 を 変更 し て も 結果 は 同じ に な り ま す 。 つ まり 、 終 了 位 置 
が 開始 位置 より 小さ い 場 合 、 開 始 位置 か ら 前 方 に 向かっ て 抜き 出す わけ で す 。 い ずれ の 場合 も 
先頭 の 文字 の 位置 は 0 に な り ま す 。 ま た 、 終 了 位 置 の 直前 の 文字 まで を 抜き 出し ます 。 


substr メ ソ ッ ド 
開始 位置 か ら 指定 し た 文字 数 分 の 文字 列 を 抜き 出し ます 。 先頭 の 文字 の 位置 は 0 に な り ま す 。 
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ン 『 ン iRNC 圧 ON 告 さ 中秋 9 当 則 放 








4 た と えば 以下 の 例 で は 、 ど れ も 文 字 列 Scr が 返さ れ ま す 。 

り 0 1 2 3 4 5678 9 
メソ ッ ド の 指定 ! 意味 9 5 
|JavaScript.sHice(4 7) |5 目 か ら 7 文字 日 まで ”。 JavaScript 
JavaScript.slice(4, -3) 5 文字 目 か ら 後 ろか ら 4 文字 目 ま で 


.JavaScript.substring(7, 4) 


JavaScript.substr(4, 3) 


上 か ら 5 日 ま で . 
!5 文 字 目 か ら 3 文字 分 


7759 = 77597.cOncat(77592): 
文字 列 msg1 と 文字 列 msg2 を 結合 し て 変数 msg に 代入 し ます 。 


5 な = "grenache".slice(2, 6) 
文字 列 grenache の 3 文字 目 か ら 6 文字 目 ま で を 抜き 出し て 、 変数 str に 代入 し ます (Str の 値 は 
enac)。 


document.write("grenache".slice(2, -2)): 
文字 列 grenache の 3 文字 目 、 後 ろか ら 3 文 字 目 まで 抜き 出し て 表示 し ます (結果 は enac)。 


5 か = "grenache".substring(2, 5): 
文字 列 grenache の 3 文字 目 か ら 5 文 字 目 ま で 抜き 出し て 、 変数 str に 代入 し ます ( 値 は ena)。 


s な = "grenache"。substr(2, 3): 
1 文字 列 grenache の 3 文字 目 か ら 3 文字 抜き 出し て 、 変 数 str に 代入 し ます ( 値 は ena)。 








ょ ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera iOS6 Android 
〇 〇 O 〇 〇 〇 〇 9 細 O 


| 参照 文字 列 を 検索 し た い ・……・…ーーー・P202 
ラ 艇 志 遇 字 を 抜き 出し た い ーー ーー P204 
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EDN いり 


文字 列 を 検索 する 









検索 し た い 文字 を 指定 し 、 そ れ が テキ スト 入力 欄 の 文章 に いく つ 含 まれ て いる か を カウ ント 
する サン プル で す 。[ 検 索 開始 ] ボ タン が クリ ッ ク さ れる と searchStr 関 数 を 呼び 出し ます 。 検 
索 文字 列 お よび 検索 対象 文字 別 を それ ぞ れ 変数 に 代入 し 、while 文 の 中 で indexOf メ ソ ッ ド で 
繰り 返し 検索 し て いま す 。 最後 まで 検索 が 終了 する と 、 検 索 開始 位置 用 の 変数 pos に -1 を 代入 
し 、 繰 り 返し 処理 を 終了 し ます 。 最後 に 検索 結果 を ダイ アロ グ に 表示 し ます 。 


// 文 字 列 に 指定 し た 文字 列 が 含ま れ て いる か 検索 する 関数 
function c7eck5 か (){ 
// 変 数 の 宣言 
Var/ の s =0: // 検 索 開始 位置 
Var 777es = 0: // 様 出 回 数 
Var seg7c7/or = document.getElementById( "sea/c//o/") .Value: // 検 索 する 文字 


Var seg7c7/7o77 = document.getElementById( "sea/c/ 太 の 77 ") .Value: // 醒 索 対象 


// 検 索 文字 列 が 入力 され て いな い 場 合 

if(sea/c7/or == ""){ 
alert(" 検 索 する 文字 列 を 入力 し て 下さ い "): 
return: 

} 

// 検 索 対象 文字 列 が 入力 され て いな い 場 合 

f(searc7/7o77 == "の ){ 
alert( "検索 対象 と な る 文字 列 が あり ませ ん 『): 
return: 


while(pos >= 0){ // 検 索 対象 を 最後 まで 検索 し た ら ル ー プ を 抜け る 
Os = seg/ カ 万 の 77.index0f(searc/7/o/ の 5): 
// 一 致す る 文字 列 が 見 つか っ た 場合 
(pos > 0){ 
万 77@s++: // 検 出 回 数 を +1 す る 
の 5++: // 次 回 の 検索 開始 位置 
} 
} 
// 検 索 結 果 を ダイ アロ グ で 表示 
alert( "文章 内 か ら 「" + searc7fo7+ "は "+ ォ 777es+" H さ れ ま し た "): 
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ー 
ーー 


の 引導 添 民営 判 潤 


せ ご iQtCEEON 千 さ 中 S 当 H 当 














※ フ ォ ン ト ・ サ イズ は 外部 CSS で 指定 し て いま す 


<body> 
<form action=""> 
<D テ > 
検索 する 文字 列 : <1nput type="text" 1d="seg/c7/o/" size="28"/> 
<input type="button" name="b1" value=" 検 索 開始 " onclick="c カ ec ん 5 か ()" 
/><br /> 
検索 対象 と な る 文字 列 (編集 可能 ) : <br /> 
<textarea id="sea/c 廊 7" cols="80" rows="10"> 
この 話 は すべ て 遠野 の 人 佐々 木 鏡石 君 よ た り 聞 きた り 。 昨 明治 四 十 二 年 の 二 月 ご ろ よ り 始 め て 
夜 分 お りお り 訪 ね 来 た り この 話 を せら れ し を 筆記 せ し な り 。 鏡石 君 は 話 上 手 に は あら ざれ ども 譜 実 
な る 人 な り 。 自 分 も また 一 字 一 句 を も 加減 せ すず 感じ た る まま を 書き た り 。 
以上 は 自分 が 遠野 郷 に て えた る 印象 な り 。 
</textarea> 
| </P> 
</form> 
</bodV> 
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Ge。 





| 











検索 する 文字 列 : 遠野 











本 (編集 可能 ) : 





遠野 の 人 佐々 木 銭 石 考 よ り 聞き た り 。 
千 を せら れ し を 区 記せ し な り 。 時 石 
滅 せ る まま を 書き た り 


indexOf メソ ッ ド 


参照 








| 


時 
よこ | 
S+ 
て | 


きこ 福 rie 測 
上 
きま 
| を 4 
の ei 装 沸 


て 
お 思 如 池野 * 強 可 9 計 
へ と rr は 克 m 
に 


議 け ら 中 所 中 器 
で * ビビ と * 独 


の 
る 
の | 
た 
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を 
て よ 
大 り 
け て 


AV 


に ne 


Ent 二 コ HHG 時 ry 還 > き | 
Fe 
< 


叶え ご 誠 ( 
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F 
ト 
P 
は 
は 
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バー 





文 
| 
| 列 
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NAVWA【c7 た ke) 


ブラ ウザ を 判別 し た い 


navigator.appName アプ リケーション 名 を 参照 
navigator.aDDVersiOh "バー ション を き 





プロ パテ ィ 





Web フ ラウ ザ の 種類 (名 前 ) と バー ジョ ン と いっ た ブラ ウザ 情 報 を 参照 で きま す 。 


apPPName プ ロ パ ティ 
ブラ ウザ の 種類 (名 前 ) を 参照 する プロ パテ ィ で す 。 た と えば 、 Internet Explorer は 
Microsoft Internet Explorer、Opera は Opera、Firefox と Chrome は Netscape を 返し ます 。 


apPPVersion プ ロ パ ティ 
ブラ ウザ の バー ジョ ン を 参照 する プロ パテ ィ で す 。 通常 は バー ジョ ン 番 号 の 後ろ に OS 名 や 
CPU の 種類 な どの 情報 が 追加 され ます が 、 返 す 値 は ブラ ウザ や 環境 に よっ て 異な り ます 。 


(navigatorrappName == "Microsoft Internet Explorer"){ 
alert("MSIE を お 使い で すね ? 『): 


ブラ ウザ の 名 前 が Microsoft Internet Explorer の 場合 、「MSIE を お 使い で すね ? 」 こ と いう ダイ ア 
ログ を 表示 し ます 。 


document.write(" バ パー ジョン: ", navigatorappVersion): 
ブラ ウザ の バー ジョ ン を 表示 し ます 。 














Column Navigator オ ブ ジ ェクト 
Navigator オ ブ ジ ェクト は Web ブ ラウ ザ や OS に 関す る 情報 を 持つ オブ ジェ クト で す 。 Web ブ 
ラフ ウザ の 種類 や バー ジョ ン 、 設定 な ど 、 取 得 し た 情報 を も と に 処理 を 変更 し た り 、 ブ ラウ ザ や バー 
ジョ ン ご と に 対応 する ペー ジ に 移動 し て 処理 を 行っ た りす る 場合 な ど に 使用 で きま す 。 







ょ ブラ ウザ 対応 表 IE10 1 ミリ IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 〇 O 〇 〇 O O 〇 O 


【SAMPLE】 ブ ラウ ザ の 情報 を 調べ る ・‥・-・-・ P216 
中 参照 2 
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NAVIGATOR.02 


ブラ ウザ の 情報 を 調べ た い 






半 
計 




















別 
し 
navigator.aDDCodeName コー ド 名 を 参照 い 
navigator.browserLahnduade 人 言語 を 参照 | ブ 
naviqgator.languade 使用 言語 を 参照 | 
navigator.platform フラット フ ォ ー ム を 参照 サ | 
navigator.userAgent エー ジェ ント 名 を 参照 情 
報 
プロ パテ ィ を 
べ 
それ ぞ れ 、 ブ ラウ ザ の コー ド 名 、 使 用 言語 、 エ ー ジ ェ ン ト な ど ブ ラウ ザ に 関す る 情報 を 参照 折 
する プロ パテ ィ で す 。 browserLanguage お よび language プ ロ パ ティ は いずれ も ブラ ウザ の L 
使用 言語 を 参照 し ます が 、 前 者 は Internet Explorer、 後 者 は Firefox に 対応 し て いま す 。 
alert(navigator.appCodeName): 
ダイ アロ グ に ブラ ウザ の コー ド 名 を 表示 し ます 。 
document.write( "使用 言語 : " + navigator.language): 
ブラ ウザ の 使用 言語 を 表示 し ます 。 
alert(" ブ ラッ ト フ ォ ー ム は :" + navigatorplatform + "で す 。 『"): 選 
ダイ アロ グ に ユー ザー の プラ ッ ト フ ォ ー ム を 表示 し ます 。 
document.write( "ユーザー エ ー ジ ェ ン ト : " + navigator.userAgent): 
ダイ アロ グ に ブラ ウザ の ユー ザー エー ジェ ント 名 を 表示 し ます 。 
ょ ブラ ウザ 対応 表 IE10 IE9 13:) Fx Chrome Safari Opera iOS6 Android 
browserlanmguage 〇 O 6⑯ X X 4 O メ X | 
language OO ON SN SS 
その 他 O 〇 O 〇 O O O O O O O | 
上 参照 2 [SAMPLE] ブラ ウザ の 情報 を 調べ る P216 | サ 
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Java が 有効 か どう か を 調べ た い 


に NNI 


naviqator.]javaEnabled() 





芽 昌 メソ ッ ド 





ブラ ウザ が java を サポ ー ト し 、 使 用 可能 か 判断 する プロ パテ イィ で す 。 使用 可能 な 場合 は true、 
使用 不可 の 場合 は false が 返さ れ ま す 。 java ア プレ ッ ト が 使用 で きる か どう か に よっ て ペー ジ 
を 移動 させ た い 場 合 な ど に 使用 し ます 。 


f(navigatorjavaEnabled() == false) { 
1 alert("」ava が 使用 で きま せん "): 


history.back(): 


java アプレット が 使用 で き な い 場 合 は 、「java が 使用 で きま せん 」 と いう ダイ アロ グ を 表示 し 、1 つ 
前 の ペー ジ に 戻り ます 。 





ぁ > プラ ウザ 対応 表 IE10 IE9 1 Fx Chrome Safari Opera iOS6 Android 


〇 〇 〇 O 〇 〇 〇 O O O 


| 3 照 AIME タイ プ の 情報 を 調べ た い ・P214 
マン 人 な 【SAMPLE】 ブラ ウザ の ブラ グイ ン 情 報 を 調べ る ・・・P218 
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プラ グイ ン の 情報 を 調べ た い 





文 .length ブラ グイ ン 数 を 参照 
.name プラ グイ ン の 名 前 を 参照 

例 .filename プラ グイ ン の ファ イル 名 を 参照 
desCriDt10 フラ クイ ン の 計 情 報 を 参 照 


] 
d 
V 
d 
が 
有 
効 
か 
ど 
の 
か 
を 
調 
ベベ 
た | 
い 





……navigator.pluqins 
全 ……navigator.plugins[ 参 照 番号 ] 








プロ パテ ィ 





ブラ ウザ に イン スト ー ル され て いる プラ グイ ン に 関す る 情報 を 参照 する プロ パテ ィ で す 。 


了 = navigator.plugins.length: 
プラ グイ ン 数 を 変数 ) に 代入 し ます 。 
alert(" プ ラグ イン 名 :" + navigator.plugins[7] .name): 


ン 計 2 問 羽 填 称 き へ NMINI 


n+1 番目 の プラ グイ ン の 名 前 を ダイ アロ グ に 表示 し ます 。 
document.write(navigator.plugins[.flename): | 
け 1 番目 の プラ グイ ン の ファ イル 名 を 表示 し ます 。 | 
document.write(navigator.plugins[ 如 .description): | 
け 1 番目 の プラ グイ ン の ファ イル の 詳細 情報 を 表示 し ます 。 | 











Column navigatorplugins | 

Plugins は Plugin オ ブ ジ ェクト (p.065) の 配列 で あり 、 配 列 の 要素 は ブラ ウザ に イン スト ー ル さ | 
れ て いる プラ グイ ン に 対応 し ます 。 個 々 の オブ ジェ クト は plugin[ 参 照 番号 ] で 参照 し ます 。 な お 、 
最初 の プラ グイ ン の 参照 番号 は 0 で す 。 





ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Andiroid 
4 X X 〇 〇 〇 へ 〇 3 








※ Opera は description に 非 対 応 


| 参照 MIME タイ プ の 情報 を 調べ た い ・・・-・・・・ P214 
1 【SAMPLE] ブラ ウザ の プラ グイ ン 情 報 を 調べ る ・・ P218 
ォ ュー 
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NAVIGATOR.05 





MIME タ イプ の 情報 を 調べ た い 


文 .length MIME タ イプ の 数 を 参照 
.description MTIME タイ ブ の 詳細 情報 を 参照 

例 .tvype MIME タ イプ を 参照 

例 .enabledPluqin MIME タ イプ に 対応 する プラ グイ ン の 使用 の 可否 を 参照 
.suffixes MIME タ イプ の 拡張 子 を 参照 





太 ……navigator.mimeTypes 
人 …-navigator.mimeTypes[ 参 照 番号 ] 





語 旦 』 プロ バテ ィ 





ブラ ウザ が サポ ー ト する MIME タ イプ (イン ター ネッ ト 上 で デー タ の 形式 を 指定 する 仕組 み ) 
に 関す る 情報 を 参照 する プロ パテ ィ で す 。 


description プ ロ パ ティ 
IME タ イプ の 詳細 情報 を 参照 し ます 。 


tyPe プ ロ パ ティ 
MIME タ イプ (image/gif、 text/html な ど ) を 参照 し ます 。 


enablePlugin プ ロ パ ティ 
MIME タ イプ に 対応 する プラ グイ ン が 使用 可能 か 判断 する プロ パテ ィ で す 。 指定 し た プラ グ 
イン が 使用 で きる 場合 は true、 使 用 で き な い 場合 は false を 返し ます 。 


suffixes プ ロ パ ティ 
MIME タ イプ の 拡張 子 を 参照 し ます 。 
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] = navigator.mimeTypes.length: 
MIME タ イプ 数 を 変数 | に 代入 し ます 。 


document.write(navigator.mimeTypes[0].type): 
1 番目 の MIME タ イプ を 表示 し ます 。 


document.write(navigator.mimeTypes[ 如 .description): 
け は 1 番目 の MIME タ イプ の 詳細 情報 を 表示 し ます 。 


補 (navigator.mimeTypes["appiication/x-shockwave-flash"].enabledPluqin == 
true){ 
alert( "作品 の 感想 を お 待ち し て いま す "): 


Flash プラ グイ ン が 使用 で きる 場合 は 「 作 品 の 感想 を お 待ち し て いま す 」 と いう ダイ アロ グ を 表示 
し ます 。 














| IColumn navigatormimeTypes 

mimeTypes は MimeType オ ブ ジ ェクト の 配列 で あり 、 配 列 の 要素 は その ブラ ウザ が サポ ー ト す 
る MIME タ イプ に 対応 し ます 。 個 々 の MIME タ イプ は mimeTypes[ 参 照 番号 ] で 参照 し ます 。 な お 、 
最初 の 要素 の 参照 番号 は 0 で す 。 





ょ ブラ ウザ 対応 表 IE10 IE9 1:) Fx Chrome Safari Opera iOS6 Android 
2 2 X O O O O 〇 O メ 








上 参照 2 ブラ グイ ン の 情報 を 調べ た い ・・・ーーーー P213 
し 訓 遇 ) [SAMPlE] フラ ウザ の プラ グイ ン 情 報 を 調べ る P218 
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NAVIGATOR.SAMPLE-01 


ブラ ウザ の 情報 を 調べ る 









ブラ ウザ の 情報 を 参照 し て 表示 する サン プル で す 。 な お 、 使用 言語 に つい て は ブラ ウザ の 対 
応 が 異な る (browserLanguage プロ パテ ィ は Firefox や Chrome、language プロ パテ ィ は 
Internet Explorer に 対応 し て いな い ) た め 、 ブ ラウ ザ を 判別 し て 使用 する プロ パテ ィ を 分 け て 
いま す 。 





// ブ ラウ ザ の 情報 を 参照 する 関数 


function pgge/og の (){ 
var 7/ = "": //html を 追加 し て いく 変数 
Var 7 カル 4ppWg/7e = navigatorapDName: // フ ラウ ザ 名 
/277/ += "<b> ア プリ ケー ショ ン 名 (appName) : </b>" + 4PpWa77e + "<br /> 
77 += "<b> バ ー ジ ョ ン (appVersion) : </b>" + navigatorappVersion + "<hr /> リ の 
777 += "<b> コ ー ド 名 (appCodeName) : </b>" + navigatorappCodeName + "<br 
ノン リッ 
//FireFox は browserLanguage プ ロ パ ティ は 非 対 応 
(7y4ppWa7e.index0f("Netscape") < 0){ 
77/ += "<b> 使 用 言語 (browserLanguage) : </b>" + navigator. 
browserLanguage + "<br /> リ : 
} 
//Internet Explorer は Language プ ロ パ ティ は 非 対 応 
(7y4ppWag/7e.index0f("Microsoft") < 0){ 
77/ += "<b> 使 用 言語 (anguage) : く </b>" + navigator.language + "<br /> リ の: 





























} 
7 += "<b> プ ラッ ト フ ォ ー ム (platform) : </b>" + navigator.platform + "<br 
/ ウ 
7/ += "<b> エ ー ジ ェ ン ト 名 (userAgent) : </b>" + navigator.userAgent+ "<hr 
/>『: 
document.qetElementById( "の oy").innerHTML = /777/ 
// 作 成 し た HTML を <body> タ グ 内 に 挿入 











<body id=" の oy" onload="page/gag() "> 
</bodV> 
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アブ リケーション 名 (appName): Microsoft Internet Explorer 
バー ジョ ン (appVersion): 5.0 (compatible: MSIE 10.0- Windows NT 6.2: WOW64- 
Trident6.0- NET4.0E- NET4.0C) 






コー ド 名 (appCodeName):Mozilla 
使用 言語 (browserLanguage): ja-JP 
プラットフォーム (platform): Win32 
エー ジェ ント 名 (userAgent): Mozilla'S.0 (compatible- MSIE 10.0: Windows NT 6.2- 
WOW64: Trndent6.0- NET4.0E- NET4.0C) 







EREGEEENNN 












を wshoeisha.com/book/pc/dic/work/sample/ で | 賠 - c 


アブ リケーション 名 (appName): Netscape | 
バー ジョ ン (appVersion):5.0 (Windows) 





コー ド 名 (appCodeName): Mozila 

使用 言語 (language): ぉ 

プ ブラット フォ ー ム (platform): Win32 

エー ジェ ント 名 (userAgent): Mozilla/5 0 (Windows NT 62: WOW64: rv200) 
Gecko/20100101 Firefox/200 











| アプ リケーション 名 (appName) : Netscape 
バー ジョ ン (appVersion) : 5.0 (iPhone: CPU iPhone OS 6_1_3 like Mac OS X) 
AppleWebKiVS36.26 (KHTML like Gecko) Version/6.0 Mobile/10B329 Safan/8536.25 





コー ド 名 (appCodeName) : Mozilla 

使用 言語 (anguage) : jajp 

| プラット フォ ー ム (platform) : iPhone 

| エー ジェ ント 名 (userAgemt) : Mozillg5.0 (iPhone: CPU iPhone OS 6_1 3 like Mac OS 
X) AppleWcbKi336.26 (KHTML like Gecko) Version/6.0 Mobile/10B329 Safan/8536.25 











…・・P210 Ianguage プロ パテ ィ 

… P210 platform プロ パテ ィ ・・・ 
… P211 userAgent プロ パテ ィ 
siR2 


IE 用 : 参 appPName プロ パテ ィ 
ロ apPVersion プロ パテ ィ -・・ 
appCodeName プロ パテ ィ ・・ 
browserLanguage プロ パテ ィ ・・‥・ 
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NAVIGATOR.SAMPLE-02 


ブラ ウザ の 
プラ グイ ン 情 報 を 調べ る 






ブラ ウザ の プラ グイ ン 情 報 を 書き 出す サン プル で す 。 java の 有効 無効 、 ブ ラグ イン の 情報 
を 表示 し ます 。 プ ラグ イン は length プ ロ パ ティ を 使い すべ て の プラ グイ ン を 参照 し て いま す 。 
な お 、 プ ラグ イン 関係 の プロ パテ ィ は Internet Explorer に は 対応 し て いな い の で 情報 を 表示 
で きま せん 。 


ブラ ウザ の 情報 を 参照 する 関数 
function page/gg り { 
変数 の 宣言 
Var 77/ = 
Var の go/7ag: 
Var の 3 ね 7 ね な 
/java が 有効 か と 
if(navigatorjavaEnabled()){ 
oo/7gg = "有効 "> 
}else{ 
oo/7gg = "無効 " 
} 
7777/ += "<b>java : く /b>" + の oo/7aVg +" <hr />: 
7 += "<b>Plugin</b> く br />": 
777/ += "<table border=1>" 
7 += "<tr> く th 種類 く br/>mimeTypes.type</th>": 
77 += "<th> 詳 細く <br/>mimeTypes.description</th>": 
7/ += "<h> 拡 張子 <br/>mimeTypes.suffixes</th>"* 
77 += "< 地 > フ ァイル 名 <br/>plugins.filename</th></tr>"* 
/ プ ラグ イン を すべ て 参照 する 
for( た 0: navigator.plugins.length: な + ){ 
7z777 += "<tr><td>" + navigator.mimeTypes[ 如 .type + "</td> 
77777 += "<td>" + navigator.mimeTypes[ 如 .description + "</td>": 
7277/ += "<td>" + navigatormimeTypes[ 旭 .suffixes + "</td>": 
7777/ += "<td>" + navigator.plugins[ 如 .filename + "</td></tr> 


LIL 月 
7 


} 


77/ += "</table>": 
document.qetElementById( "の ogy").innerHTML = /77/: 
作成 し た HTML を <body> タ グ 内 に 挿入 
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<body id=" の ogy" onload="page/ga() "> 


</bodV> 





Ga" り (Jr 








ドコ 
Java: 有 効 








Pl 












給 http:/www.shoeisha.co お ・ 弓 で | 怠 フラ ウザ の プラ グイ ン 情 報 を 調べ る 








詳細 





開 際 こう ul 





lngins.filenam 





ファ イル 名 』 





EE 








ブラ グイ ン 関 係 の プロ パテ ィ は Internet Explorer に は 対応 し て いな い の で 情報 が 表示 され ませ ん 


【 う ) Firefox 
FirefoX * 


) ブラ ウザ の プラ ザイン 情報 を 講 べ る 
を きい ww.shoeisha.com/bookJpc 


Java: 無 効 


dic/work/sample/JSdic/25 












Plugin 





mimeTypes.type 


詳細 


mimeTypes.description 


拡張 子 


ファ イル 名 


mimeTypes.suffixes | plugins.filename 





application/x- 
vnd google.updatedwsbcontrol3 


InpGoogleUpdated dl 





lapplication/x- 
Mnd.google oneclickctrl9 











INPSPWRAP.DLL 








Firefox で は プラ グイ ン 情 報 が 表 


| 参 | javaEnabled メソ ッ ド 
ロ length プロ パテ ィ -・…・ 


filename プロ パテ ィ 


示さ れ ま す 








PZ12:description 日 パイ ne YNue vn P213 
・ P213 tyPe プロ パ バ パ ティー に ーー P214 
P213.isuHiheS ガロ パテ イ の 0 ンク ここ YYzo P214 
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ひろ 器 装 通 へ NMINIS 寺 さい 


[まさ AINJ] 











EE 





LIMAGEO1 "5 ” 225 還 還 E 
画像 を 扱い た い 


太 = new 1Imade() 画像 オブ ジェ クト を 作成 
例 . 画 像 名 画像 オブ ジェ クト を 作成 
.images[ "参照 番号 "] 画像 を 参照 


$.images.length 画像 の 数 を 参照 設定 


……:Image オ ブ ジ ェクト を 格納 する 変数 
$…… ド キュ メン ト オ ブ ジェ クト [省略 可 】 








オブ ジェ クト (Image)、 プ ロ パ ティ (images.length) 





新しい 画像 の オブ ジェ クト を 作成 する に は 、new ス テー トメ ント (p.039) を 使っ て Image オ 
ブ ジ ェクト を 作成 し ます 。 Image は 画像 を 扱う オブ ジェ クト で す 。 作成 し た オブ ジェ クト は 
src プ ロ パ ティ (Dp.223) を 指定 し 、 画像 と し て 利用 で きる よう に し ます 。 

既存 の 画像 を 参照 する に は 、 画 像 の 名 前 や 参照 番号 を 利用 し ます 。 画像 名 は <img> タ グ の 
name 属 性 ある い は id 属性 で 指定 され て いる 名 前 で す 。 た と えば 、 く img src=' 画 像 ファ イル 
名 (URI)" name='proflmg' /> と 指定 され て いる 画像 を 参照 する 場合 は 次 の どちら か の よう に 
な り ま す 。 


document.profImq 
document.images["profImg"] 


参照 番号 を 利用 する 方 法 は 、 ド キュ メン ト 中 の 画像 を 要素 と する 配列 か ら 、 そ の 参照 番号 に 
対応 する 画像 に アク セス する 仕組 み で す 。 images[ 参 照 番号 ] と いう 形式 で 指定 し ます 。 画像 
の 参照 番号 は ドキ ュ メ ント の 中 に 画像 が 記述 され て いる 順番 で 、0 か ら の 連 番 に な り ま す 。 た 
と えば 、 ド キュ メン ト 中 の 2 番目 の 画像 を 参照 する 場合 は 次 の よう に な り ま す 。 


document.imaqges[1] 
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777a96 = neW Imade(): 
Image オ ブ ジ ェクト myImage を 作成 し ます 。 


document.images[1].height = 250: 
2 番目 の 画像 の っ 高 さ を 250 ピ クセ ル に 設定 し ます 。 





alert(document.images.length): 
ドキ ュ メ ント 中 の 画像 の 総数 を ダイ アロ グ に 表示 し ます 。 





















Column 画像 を DOM で 参照 する 


<img src=" 画 像 ファ イル 名 (URI)" id="proflmg" /> と 指定 され て いる 画像 を DOM で 参照 する 
場合 は 次 の よう に な り ま す 。 


document.getElementById("profImq') 


アル ルル た びり) 揚 較 3I リ 1 3:) Fx Chrome Safari Opera iOS6 Android 


〇 ⑥⑯) O O 〇 O 〇 〇 〇 O 
上 参照 】 【SAMPLE】 画像 の 情報 を 表示 する ・・・・・・・・ P225 
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| 
| 





せ ど 沙 咽 


ー 
ン 





[ 氷 較 ] 








、 画像 の 情報 を 扱い た い | 


文 。name 画像 の 名 前 を 参 昭 
文 .width 画像 の 幅 を 参照 設定 
上 文 .height 画像 の 高 さ を 参照 / 設 定 





娘 ……Image オ ブ ジェ クト (画像 名 また は imadges[ "参照 番号 "]) 





プロ パテ ィ 





| 画像 の サイ ズ や 枠 線 の 幅 、 周 り の 文章 な ど と の 間隔 に 関す る 情報 を 参照 設定 する プロ パテ 
ー---』 イ で す 。 た と えば 画像 の サイ ズ に 合わ せ て ウィ ンド ウ の サイ ズ を 変更 する 場合 な ど に 利用 し ま 
す 。 


| 77M7779 = document.images[0].name: 
交 』 1 番目 の 画像 の 名 前 を 変数 mylmg に 代入 し ます 。 





document.write( "画像 の 幅 は " + document.imaqes/7 ガ .width + "、 高 さ は " + 
document.images/7.height + "で す "): 
け 1 番 目 の 画像 の 幅 と 高 さ を 書き 出し ます 。 





> ブラ ウザ 対応 表 IE10 1 ミリ 1】 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 〇 O 〇 O 〇 O 〇 O 


| 参照 画像 の URI を 参照 設定 し た い ・…・・-・ P223 
デパ 【SAMPLE】 画 像 の 情報 を 表示 する ・・・・・・-・ P225 





222 | IMAGE.02 





Cd3r 環 較 較 較 還 較 詳 証 昌 。-' ペ ぺん 《 ぴ W《〔〈 
画像 の URI を 参照 設定 し た い 


文 。STC 画像 の URI を 参照 / 設 定 
文 。lOwsrc 低 解像度 用 画像 の URI を 参照 / 設 定 





衣 ……Image オ ブ ジ ェクト (画像 名 また は images[ "参照 番号 "]) 





プロ パテ ィ 





Image オ ブ ジ ェクト の URI を 参照 設定 する プロ パテ ィ で す 。 プ ロ パ ティ の 値 は 絶対 URI ま 
た は 相対 URI で 指定 し ます 。 


src プ ロ パ ティ 
画像 の URI を 参照 設定 し ます 。 状況 に 応じ て 絶対 URI か 相対 URI を 用 いま す 。src プ ロ パテ 
イィ を 変更 する と 、 表 示 後 に 画像 を 切り 替え 可能 に な り 、 ア ニメーション を 作成 で きま す 。 


lowsrc プ ロ パ ティ 
低 解像度 用 の 画像 を 設定 し ます 。 


new Imagqe().src = "product01.jpg": 
Image オ ブ ジ ェクト を 作成 し 、URI を product01.jpg に 設定 する こと で 、 そ の 画像 を 表示 し ます 。 


myImg = document.images["product05"].src: 
変数 myImg に 画像 product05 の URI を 代入 し ます 。 





p ブラ ウザ 対応 表 IE10 1 3 Fx Chrome Safari Opera iOS6 Android 
O ⑨, (@ O O 〇 O O O 〇 


参照 】 画像 の 情報 を 扱い た い ・…ーー -P222 
。 
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UGC 議 較 蘭 庫 ーー ハー… や tk ぬ ぬ &※&』 ペ ボ オ @ ロ ロー 
画像 の 読み 込み の 完了 を 調べ た い 


文 .COITDletG 男 人 の 読み 込み の 完了 を 参照 


は Image オ ブ ジェ クト (画像 名 また は imades[ "参照 番号 "]) 





EE 
し 3 





プロ パテ ィ 





画像 の 読み 込み が 完了 し て いる 場合 は 値 と し て true、 完了 し て いな い 場 合 は false を 返 し ま 
す 。 画像 を 使っ た ゲー ム や アニ メー ショ ン な ど で 、 す べ て の 画像 の 読み 込み が 完了 し て か ら 処 
理 を 開始 し た い 場 合 に 利用 し ます 。 









if(document. ね ん e77g.complete) alert(' 読 み 込み 完了 ! 5 
画像 fakelmg の 読み 込み が 完了 し た ら 、 ダ イア ログ を 表示 し ます 。 






> ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 


O O 〇 較 O ひ O CS O 


| 参照 画像 が 読み 込め な いと き に 処理 を Nres 
ロ n 読み 込み 時 や 移動 時 に 処理 を 行い た い ・・- 
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IMAGE.SAMPLE-01 





画像 の 情報 を 表示 する | 


テマ ト トト ト ト ⑤k ト |「| エ ニニ ニ ー ニ コト uk ト ニセ レ トド ト ト G は ペペ ーーmーmmmmmmーmmーーーー 


画像 の 大 き さ を 表 に 書き 出す サン プル で す 。 for 文 で バー ジ 上 の すべ て の 画像 の 名 前 と サイ 
ズ を 取得 し 、innerHTML で <div id="div1"></div> の タグ 内 に 出力 し て いま す 。 





function pa9e/gg() { // 画 像 情報 を 取得 し て div タ グ に 表示 する 関数 
for (var 7ows = "",7= ェ 0:7< document.images.length: な +) { 
var 79 = document.images[7]: // 国 像 の 参照 を 取得 
rowWs += "<tr><td>" + 79.at + "</td テ の: 
rows += "<td>" + 79.Width +"X リ + 9.height + "</td></ 人 (> 


document.getElementById("gv7").innerHTML = "<table>"+ 7 の WS すく / 
table>"% 


} 











<body id="body" onload="page/ga7() "> 
<diV> 
<img src="1mage/usagi.gif" id="usagi" alt="usad1" /> 
<img src="1mage/neko.gif"' id="neko" alt="neko" /> 
<imq src= "mage/panneko.gif" id="panneko" alt="panneko" /> 
</diV> 
<hr /> 
<div id=" の 7 "></diV> 
</bodV> Jl 











・ P220 





| 参 照 length プロ パテ ィ 
n width プロ パテ ィ ・・・ 
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] 


I 
に 
に 


eel 当 店 槍 半 刺 ③ 勤 固 ン lc に IK と ドコ に 


os 














LNKOT1 "KW 2 
URI を 参照 / 設 定 し た い 


location = 肥 URI を 参照 / 設 定 
URL = 文 URI を 参照 


プロ パテ ィ 


ンド ビ で ノ 上 し 

URI を 参照 また は 設定 する プロ パテ ィ で す 。 ボタ ン に リン ク を 設定 し た り 、 イ ベン ト 発 生 時 
に ペー ジ を 移動 させ る な ど 、<a> タ グ 以 外 で ペー ジ を 移動 させ た い 場 合 に 利用 で きま す 。 な 
お 、location プ ロ パ ティ の 参照 と URI プロ パテ ィ は 同じ 働き に な り ま す 。 





location プ ロ パ ティ 

URI を 参照 / 設 定 し ます 。location プ ロ パ ティ で URI を 設定 する と 、 現 在 の ペー ジ か ら 指 定 
し た URI の ペー ジ に 移動 で きま す 。 な お 、 ブ ラウ ザ に よっ て は location に URI を 指定 し て も 動 
作 し な いこ と が あり ます 。 その 場合 は location.href で URI を 指定 し て くだ さい (p.228)。 


URL プロ パテ ィ 
ドキ ュ メ ント の URI を 返し ます 。 参照 の み で 設定 は で きま せん 。 


<input type="button" value=" ジ ャ ンプ " onclick="window.location.href='http:// 


wwwr.ank.co.jp/"" /> 
クリ ッ ク さ れ た ら 、 指 定 の URI に 移動 し ます 。 





alert(document.URL): 
現在 の URI を ダイ アロ グ に 表示 し ます 。 
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関 ドメイン 名 を 参照 し た い ・・・ ーー PO60 ペー ジ の URI を 変更 し た い ・…・・……・・…・ P232 
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ペー ジ を リロ ー ド し た い 


location.reload() 





オブ ジェ クト 





Location は 現在 の ペー ジ の URI に 関す る 情報 を 扱う オブ ジェ クト で す 。 Location オ ブ ジ ェ 
クト の reload メ ソ ッ ド で は 、 ペ ー ジ の リロ ー ド (再読 み 込 み ) が 可能 で す 。 一 定時 間 ご と に 情 
報 が 書き 換え られ る ペー ジ ( チ ャ ッ ト な ど ) で タイ マー と 組み 合わ せ て 使用 すれ ば 、 自 動 的 に 最 


新 の 情報 を 表示 で きま す 。 


<input type="button" value=" リ ロー ド " onciick="location.reload()" /> 
ポタ ン が クリ ッ ク さ れ た ら 現 在 の ペー ジ を リロ ー ド し ます 。 








p ブラ ウザ 対応 表 IE10 1 





O 〇 


IE8 Fx 


Chrome Safari 


O 


Opera 


O 


iOS6 Android 
〇 O @⑳ 





参照 URI を 参照 / 設 定 し た い 
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で ラー ロロ ご Qt 一 ク 


目 


壮 記 一 


に | 
1 ド | 


1 


*C 何 


江 


[NVY こ ] 

















EN だ E 基 議 議 議 議 議 計 還 語 時 。00 へ 0 ハ 0 ぴ 0 ソ ぴ 
ペー ジ 中 の リン ク 情 報 を 参照 し た い 


document.links[ 参 照 番 号 ]. 放 リン ク の WW を 
.href リン ク を 参照 設定 


支 …… プ ロ パ ティ 、 メ ソ ッ ド 
全 …|ocation ま た は document.links[ 参 照 番号 ] 





プロ パテ ィ 





Links オ ブ ジ ェクト 

Link は ドキ ュ メ ント 中 に ある リン ク を 表す オブ ジェ クト (<a href="> で 定義 され た リン ク ) 
で す 。Iinks プ ロ パ ティ は Link オ ブ ジ ェクト の 配列 で 、 ド キュ メン ト 内 の すべ て の リン ク 情 報 
を 持っ てい ます 。 リ ンク の 情報 は 配列 の 要素 と し て 格納 され て いて 、document.links[ 参 照 
番号 ] と いう 形式 で 参照 で きま す 。 リ ンク の 参照 番号 は ドキ ュ メ ント の 中 で リン ク が 記述 され 
て いる 順番 で 、0 か ら の 連 番 に な り ま す 。 
href プ ロ パ ティ 

href 属 性 を 表す プロ パテ ィ で 、 リ ンク 先 ま た は 現在 の ペー ジ の URI を 参照 設定 し ます 。 


document.write(document.inks.length): 
ドキ ュ メ ント 内 の リン ク 数 を 書き 出し ます 。 


7ew77.location.href = "http://Www.ank.co.jp/ ": 
ウィ ンド ウ newWin の URI を 設定 し ます 。 











Column Area オ ブ ジ ェクト 

イメ ー ジ マッ プ ( ク リッ カブ ル マ ッ プ ) の <area> タ グ で 定義 され る エリ ア ( リ ンク 領域 ) の 情報 を 
持っ て いる オブ ジェ クト に 、Area オ ブ ジ ェクト が あり ます 。Area オ ブ ジ ェクト の リン ク は Link オ 
ブ ジ ェクト に 内 包 さ れる た め 、 実際 に 利用 する 場合 は エリ ア 名 また は リ ンク 配列 で ある Iinks[ 参 照 
番号 ] の 形式 で 指定 し ます 。 な お 、Area オ ブ ジ ェ ク ト の 持つ プロ パテ ィ は length プ ロ パ ティ を の ぞ 
き Link オ ブ ジ ェクト と 共通 で す 。 





ぁ プラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 O 〇 O 〇 〇 O 〇 (の) O 





| 参照 ペー ジ 中 の アン カー 情報 を 参照 し た い -・・・・ P230 
な URI を 参照 / 設 定 し た い ・・ーーーーー…ー P226 


【SAMPLE】 ペ ー ジ の リン ク を 書き 出す ・‥・・・- P235 
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[UNK04_ や WS ”… 全国 還 還 還 還 
リン ク の 読み 込み 先 を 設定 し た い 


r# で 弄 商 付 弟 邊 さこ 9 耳 ツ ー ス 


document.Iinks[ 参 照 番号 ] .tardet 読み 先 を 参照 設定 





プロ パテ ィ 





ー 
つう 


リン ク 先 の ウィ ンド ウ 名 や フレ ー ム 名 を 参照 設定 し ます 。 





document.iinks[0].target = "sg の 77": 
1 番目 の リン ク の 読み 込み 先 を ウィ ンド ウ 名 subWin に し ます 。 





ご て 滞 患 RN 吾 芝 呈 3 さ V こ 


ぁ ょ ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera OS6 Android 
〇 〇 O 〇 O 〇 O 〇 5) の ) 〇 O 
Pets st: P226 | 


URI を 参照 / 設 定 し た い ン 
| soc | 


= に 
LINK.04 | 229 影 


ご ] 





3 
記 











「 
ペー ジ 中 の アン カー 情報 を 参照 し た い 


document.anchors[ 参 照 番号 ]. 





プロ パテ ィ 





Anchor は ドキ ュ メ ント 中 に ある アン カー を 表す オブ ジェ クト (<a name=""> で 定義 され た 
アン カー) です 。 anchors プ ロ パ ティ は Anchor オ ブ ジ ェクト の 配列 で 、 ド キュ メン ト 内 に お 
ける すべ て の アン カー の 情報 を 持っ て いま す 。 各 ア ンカ ー の 情報 は 配列 の 要素 と し て 格納 され 
て いて 、document.anchors[ 参 照 番号 ] と いう 形式 で 参照 で きま す 。 ア ンカ ー の 参照 番号 は 
ドキ ュ メ ント の 中 で アン カー が 記述 され て いる 順番 で 、0 か ら の 連 番 に な り ま す 。 


document.anchors[1].href = "070831": 
2 番目 の リン ク 先 の アン カー 名 を 070831 に し ます 。 


/e/ = document.anchors.length: 
ドキ ュ メ ント 内 の アン カー 数 を 変数 len に 代入 し ます 。 
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230 | LINK.05 


EGGE 福 議 還 議 議 議 議 語 了 0'〔w…ー ペ w ゆ 上 k ゆ k ゐ qWk ヶ フ c 


ペー ジ の ロケ ーション 情報 を 
参照 し た い 


文 。Dathhame パフ 名 を を 照 





文 .host ホス ト を 参照 
文 。h0Stha1e 。 ホス ト 名 を 参 上 
文 .DOIt ポー ト 番 号 を 参照 


太 。DTOtOCOL フロ トコ ル を 照 











プロ パテ ィ 





ペー ジ の ロケ ーション に 関す る 情報 を 参照 し ます 。 現 在 の ペー ジ の ロケ ーション の 場合 は 太 
に location を 、 ペ ー ジ 上 の リン クオ ブ ジ ェクト を 参照 する 場合 は 婦 に document.links[ 参 照 
番号 ] を 指定 し ます 。 ペ ー ジ 中 に ある 最初 の リン ク の 参照 番号 は 0 に な り ま す 。 


s/ の 77.document.write(" ホ スト 名 :", location.host): 


ホス ト 名 を ウィ ンド ウ 名 subWin に 表示 し ます 。 





sg の 7.document.write(" プ ロト コル : ", document./s [.protocoD): 
は 1 番目 の リン ク の プロ トコ ル を ウィ ンド ウ 名 subWin に 表示 し ます 。 
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ン 語 て 己 購 本 直通 一 すべ ③ 二 ツー タス 


と 計 て 己 還 本 弟 駒 パル ツー 二 ロ 8 ツー タス 


[さこ ご] 








し 








na | UNK07” ” ご ぶ 2 
_| ペー ジ の URI を 変更 し た い | 


location.replace() 





肛 皇 』 メソッド 








指定 し た ペー ジ 太 へ 移動 する メソ ッ ド で す 。 replace メ ソ ッ ド で ペー ジ を 変更 する と 、 
History オ ブ ジ ェクト を 上 書き する た め 、 履 歴 に 元 の ペー ジ が 残り ませ ん 。 つま り 、 ブ ラウ ザ 
の [戻る ] ボ タン を 使っ て 現在 の ベー ジ に 戻れ な く な り ま す 。 





<input type="button" value=" リ ロー ド " onclick="location.replace('http://www. 


ank.co.jp/)" /> 
ポ ボタン が クリ ッ ク さ れ た ら 指定 の ペー ジム 移動 し ます 。 





ぁ プラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 〇 (9 O O O O 〇 O O 


URI を 参照 / 設 定 し た い ・・… ーー P226 
| 嘩 天 【SAMPLE】 履 歴 を 残さ ず ペー ジ を 移動 する ・‥・P237 
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URI を 参照 / 設 定 する 








ボタ ン や 画像 の クリ ッ ク 、 ま た は セレ クト ボッ クス の 操作 で リン ク を 実行 する サン プル で す 。 
onclick 属 性 や onchange 属 性 に 設定 し た 関数 内 で location プ ロ パ ティ を 変更 する こと に よっ 
て 、<a> 要 素 以外 の 要素 に も リン ク を 設定 で きま す 。 


こ 湯 料 は 一 の こき SW 


ご >:t 
ン 『! 





function 9o( 加 ex) { // 指定 の ペー ジ を lframe に 表示 する 
var 7 = document.qetElementById("7y77a77e") contentWindow: 
switch (index) { 
Ccase 0: 
break: 
Case 1: 
w7.location = "http://www.ank.co.jp/": 
break: 
Case 2: | 
w7.location = "http://www.shoeisha.co.jp/ ": 
break: 


} | 


function se/ecf び A7() { // セレ クト ボッ クス で 選択 され た 項目 の ペー ジ を 表示 
go(document.getElementById("se/ecf").selectedIndex): 





己 童 は 一 て 


の it 合 映 





} 








<bodV> 
<form> 
<input type="button" value=" ア ンク " onciick="go7:" /><br> 
<input type="button" value=" 翔 泳社 "onclick="go(2:" /><br> | し 
<select id="select" onchange="selectURI():"> 
<option selected="selected"> 選 択 し て 下さ い </option> 
<option> ア ンク </option> 
<option> 翔 泳社 </0ption> 
</select> 
<P><imd src= "1mages/anklogo.gif" alt="ANK 
<iframe id="myFrame "></iframe> 
</form> 
</bodV> 














onclick="go(:" /></P> 





[さこ ご] 
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Internet Explorer 

















ーー ニーーーーーーーーー 








コピ ペ 利 定 支 舞 シ ステ ム 
| ヨ E ベ ルナ ニッ ラサ ニ バ = 語 生 計時 


az S228 記 ペル カカ 


1 シュ テム 主 発 


NrePow の 問 人 デザ イ 
me シス テム TOPICS _- 当 


wmasa ウ ライ アント アブ リサ ー 
か 1 2063 お 4 
2 ・ コピ ^ 提 シス テム 「 コ ピ ベ リル ナー W サ ー バ ー]0 阪 売 語 計 し まし た し 
タプ レッ Imc 才 け リ フト つ ェ ァ 栖 先 20W3/2 ハ 4 


く > 
ボタ ン や 画像 を クリ ッ ク 、 も し く は セレ クト ボッ クス を 選択 する と 、iframe に リン ク が 表示 され ます 


て 過 2 病 補 竣 優 りつ レシ ュ テム 


N ざ ご 








E 衣 : 参 Iocaton ポ ヲ ジ モク ドー ーーー・ P226 
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LINK.SAMPLE-02 U 
) | 
o ey 旬 こ 
ペー ジ の リン ク を 書き 出す 記 
| 上 | 
] 
ドキ ュ メ ント 中 の リン ク 情 報 を 別 ウ ィ ン ド ウ に 書き 出す サン プル で す 。[ リ ンク 情報 一 覧 ] ボ 定 
タン が クリ ッ ク さ れ た 際 に showlnfo 関 数 を 呼び 出し 、 新しい ウィ ンド ウ に ペー ジ 上 の リン ク す | 
の 情報 を 書き 出し ます 。 る 
ペ 
| 
// ロ ケー ショ ン 情 報 を 取得 する 関数 ンス 
function s7ow777 の (){ り 
var 加 め 罰 = window.open("", "加太 廊 ", "width=320,height=500"): ン 
如 め 久 妨 .document.write("「", document.title, "」 の リン ク 一 覧 <hr />『): | ク 
77s = new Array(document.inks.length): | を 
// ペ ー ジ 上 の すべ て の リン ク の href 属 性 の 値 を 取得 | 書 
for( た 0: 7<document.inks.lengthz i++ ){ 1 き 
775[7] = document.inks/77.hrefi 当 
// 新 し く 開い た ウィ ンド ウ に ロケ ーション 情報 を 表示 | 
for( た 0: た document.links.lengthz i++ ){ 
カ pM77.document.write("<p> リ ンク No ツチ +1, "<br / テ の ): 
如 M77.document.write(" リ ンク 先 =<a hre 人 = 775[ 如 , "target=_blank' 
9 L 
如 MW77.document.write(/75[ 胃 , "</ ョ ><br / テ の): | 
如 砂 訪 .document.write ("ホス ト 名 =", document.inks[ 如 .hostname, | 
"<br 2: | 
加太 .document.write ("プロ トコ ル =", document.inks[ 如 .protocoL "</ 
p>): 
} 
加 少 娘 .dOocument.bqColor = "fcc00": 
|} 
| 
| 
| 
| 
5 
ン 
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<body> 
<p><b> ペ ー ジ 中 の ロケ ーション 情報 ・ リ ンク 一 覧 を 別 ウィ ン ドウ に 表示 し ます </b></p> 
<form action=""> 
<P><input type="button" value=" リ ンク 情報 一 覧 " onclick= "sow77 の りり" 
/ た yp> 
</form> 
<ul> 
<li><a href="http://www.google.co.jp/ ">Google</a></> 
<li><a href="http://www.yahoo.co.jp/ ">Yahool japan</a></1> 
<li><a href="http://www.infoseek.co.jp/ ">infoseek</a></Hi> 
<li><a href="http://Www.goo.ne.jp/ ">goo</a></li> 
</ul> 


</ body> _ 明 






























ー ジ > 人 x 還 











[リン ク 情 報 一 覧 ボタ ン を クリ ッ ク す る と 、 
新しい ウィ ンド ウ に リン ク 先 の 情報 が 表示 され ます 


| 3 | links オプ ジェ クト P228 protocol プロ パテ ィ ーーー ーー P231 
ロ href プロ パテ ィ ・・ ・P228 


hostname プロ パテ ィ ーーー ーー P231 
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LINK.SAMPLE-03 


履歴 を 残さ す ペ ー ジ を 
移動 する 






履歴 を 残さ ず に ペー ジ を 移動 する サン プル で す 。body 要 素 の onload 属 性 に タイ マー を セ 
ッ ト し て 、3 秒 後に アン ク の Web サ イト ム へ 移動 さ せ て いま す 。replace メ ソ ッ ド で は 履歴 が 残 
ら な いた め 、 ブ ラウ ザ の [戻る ] ボ タン で この サン プル の ペー ジ へ 戻る こと は で きま せん 。 


wHEOK 内 RNN ご 8 ツー タス 





<body onload='setTimeout(function() { 
location.replace("http://www.ank.co.jp/ "): 
}, 3000) ><!- タ イマ ー を セッ ト -> 
<D><b> 3 秒 後に ペー ジ を 移動 し ます </b></D> 

</bodV> 








<] Internet Explorer 5 


を 細 http:/wmw shoeish.co  ・ 自 び | 4 お 天 屋 を 残さ す に バー ジ を 移動 > 








の el 杜 悦 R ツ ー ス olOK 肖 慌 賠 玖 






ペー ジ を ロー ド し た 3 秒 後に 指定 し た Web サ イト に 移動 し ます 


位 http-/wwweankcoJp′ ・ 思 〇 上 人 株式 会 せ ア ンク 


NOME 人 内 層 お 還 合せ ニュ 
ーーー き エ 合せ アン ク 


$ 系 開 し 78 
が 価 績 ある 





移動 し た 後 は [戻る ] ボ タン を クリ ッ ク し て も サン プル の ペー ジ に 戻り ませ ん 


上 E 朋 : 参 9DI2E メジ ES の が 2o さ マル NYC P232 
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どの ペー ジ か ら 来 た の か 詩 








文 。referrer リン ク 元 の URI を 参照 





衣 ……Document オ ブ ジ ェクト (ドキ ュ メ ント 名 ) 





プロ パテ ィ 





ハイ パー リン ク に よる 移動 元 の ペー ジ を 調べ ます 。 

Web ブ ラウ ザ の アド レス バー で 直接 URI を 入力 し て 現在 の ペー ジ を 開い た り 、[ 戻 る ] ボ タン 
| を 使用 し た り し た 場合 は リン ク 元 (前 の ペー ジ ) の URI は 取得 で きま せん 。 また 、 ロ ー カ ルフ ァ 
イル に つい て も URI は 取得 で きま せん 。 


document.write(document.referrer + "か らい らっし ゃ いま し た ね ! 『): 
リン ク 元 の URI を 書き 出し ます 。 


7e7 = document.referrer: 
リン ク 元 の URI を 変数 ref に 代入 し ます 。 











ょ ブラ ウザ 対応 表 IE10 1 3) Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O O 〇 O O (⑧) O 〇 O 


参照 URI を 参照 / 設 定 したい ー P226 
| マン 【SAMPLE】 どの ペー ジ か ら 来 た の か 調べ る -・- P242 
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の 
『 
て 2 | 裏 県 
履歴 の 数 を 調べ た い | ジ 
| か 
5 
示 
文 .history.length の 
の | 調 上 
表 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 】 か 
プロ パテ ィ い 
| 代 
length プ ロ パ ティ を 利用 すれ ば 、 ブ ラウ ザ が その 時 点 で 持っ つて いる 履歴 の 総数 を 参照 で き | 二 
ます 。 な お 、 履歴 が 存在 し な い 場 合 の length プ ロ パ ティ の 値 は ブラ ウザ に よっ て 異な る の で | 数 
注意 が 必要 で す 。 Internet Explorer と Opera で は 0 で ある の に 対し 、Firefox で は 1 に な り ま | を 
す 。 | 内 
た 
い 
/e/ = history.length 
履歴 の 総数 を 変数 len に 代入 し ます 。 
| 
1 
| 
| 
| 
ょ ブラ ウザ 対応 表 IE10 1 ミリ 13:) Fx Chrome Safari Opera iOS6 Android 且 | 
0 。 人 。 @⑨9 。 〇 @ 2 ③ G で 
5 リ 
ブラ ウザ の ボタ ン と 同様 の 処理 を し た い 
参照 】 本 53PSE 5 と の に ] 
【SAMPLE】 履歴 の 前 後に 移動 する ・…・・・・ M ょ つ 
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ューー 





記 ELSS2E 斑 議 議 議 還 還 語 へ ハー ぴ t ひ CO% ト こ kl%%k ト W ぃ … 
履歴 の 前 後に 移動 し た い 


文 .history.back() 1 つ 前 の ペー ジ に 戻る 
文 .history.forward ( ) 1 つ 比 の ペ ー ジ に 進む 
文 .historV.qo(^) 指定 し た 数 だ け 移動 





娘 ……Window オ ブ ジ ェクト (ウィ ンド ウ 名 ) 【 省 略 可 】 
多 … 移 動 す る ペー ジ 数 ( 正 ま た は 負 の 整数 ) 





藍 后 還 メソ ッ ド 





History オ ブ ジ ェクト は ブラ ウザ の 履歴 に 関す る 情報 を 持っ た オブ ジェ クト で す 。 履歴 と は 
ブラ ウザ の [進む ] ボ タン や [戻る ] ボ タン の クリ ッ ク で 表示 され る 前 後に 表示 し た ペー ジ の 記録 
で す 。History オ ブ ジ ェクト を 使用 する と 、 前 後に 表示 し た ペー ジ に 移動 で きま す 。 


back メ ソ ッ ド 
1 つ 前 の ペー ジ に 戻る メソ ッ ド で す 。 ブ ラウ ザ の [戻る ] ボ タン の クリ ッ ク と 同様 の 効果 を 実 
現し ます 。 


forward メ ソ ッ ド 
1 つ 後 の ペー ジ に 進む メソ ッ ド で す 。 ブ ラウ ザ の [進む ] ボ タン の クリ ッ ク と 同様 の 効果 を 実 
現し ます 。 


go メソ ッ ド 

引数 に 指定 し た 数 だ け ペ ー ジ を 移動 し ます 。 負 の 値 を 指定 する と 、 指 定 し た 数 だ け 前 の ペー 
ジ に 戻り ます 。 た だ し 、 履 歴 の 数 より 大 きい 数 値 を 指定 し た 場合 や ブラ ウザ を 起動 し て 最初 に 
ペー ジ を 開い た と き な ど 、 指 定 し た 履歴 が 存在 し な い 場合 に は メソ ッ ド を 実行 し て も 何 も 起こ 
ら な い の で 、length プ ロ パ ティ で あら か じ め 履 歴 の 数 を 確認 し て か ら 使 用 する と よい で し ょ 
う (p.263)。 
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<input type="button" value=" 戻 る " oncick="history.back()" /> 
[戻る ] ボ ポタ ン が クリ ッ ク さ れる と 、1 つ 前 の ペー ジ に 戻り ます 。 





<input type="button" value=" 和 進む "onclick="history.forward()" /> 
“ [進む ] す ボタ ン が クリ ッ ク さ れる と 、1 つ 後 の ペー ジ に 進み ます 


history.go(2): 
2 つ 後 の ペー ジ に 進み ます 。 


history.go(-2): 
2 つ 前 の ペー ジ に 戻り ます 。 


history.go (7477pWg/7): 
変数 jumpNum の 値 で 指定 され た 数 だ け 履 歴 を 移動 し ます 。 


ょ ブラ ウザ 対応 表 IE10 IE9 1:) Fx Chrome Safari Opera 
O 0 O O O O O 


| 参照 ブラ ウザ の ポタ ン と 同様 の 処理 を し た い ・・・・・ P083 
ジ が 履歴 の 数 を 調べ た い ・・ーー P239 
【SAMPLE】 履歴 の 前 後に 移動 する ・・・・・・・・・ P244 








iOS6 Android 


O O 
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| 後 


履 


計ら 職 


SN 
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く こ = 
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ニテ SI] 
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ーーーー オ イオ 
| 





HISTORY.SAMPLE-01 


どの ペー ジ か ら 来 た の か 
調べ る 





リン ク 元 の ペー ジ の URI を 書き 出す サン プル で す 。 リ ンク 元 の ペー ジ に ある リン ク で は 
HTML/XHTML を 利用 し 、a 要 素 の href 属 性 で リン ク 先 の URI を 設定 し て いま す 。 一 方 、input 
ボタ ン で は 、location プ ロ パ ティ の 値 に リン ク 先 の URI を 設定 する こと で 移動 で きる よう に し 
て いま す 。 移 動 先 の ペー ジ で は 、referrer プ ロ パ ティ で リン ク 元 の ペー ジ の URI を 書き 出し ま 
す 。 

referrer プ ロ パ ティ は Web サ ー バ 上 で の み 参 照 で きま す 。 た だ し 、Web サ ー バ の 設定 に よ 
り 参 照 で き な い 場合 が あり ます 。 

な お 、 別 の ペー ジ か ら の リン ク で は な く URI の 直接 入力 や ブラ ウザ の 「 戻 る ]」 ボ タン 、 
location プ ロ パ ティ の 変更 な ど に よっ て 移動 し た 場合 は 、 元 ペー ジ の URI を 参照 で きま せん 。 





※ リン ク 先 の history_refferhtml で 呼び 出さ れる 


Var 7 
// 参 照 で き な い 場 合 
f(document.referrerlength == 0){ 
77 = "参照 で きま せん ": 
// 参 照 で きた 場合 
}elset 
77 = document.referrer: 
} 
// リ ンク 元 の URI を 取得 し て 表示 
document.write(" リ ンク 元 の ペー ジ : ", 7): 








※ リン ク 元 の HTML 


<bodV> 

<p><a href="history_referrer.html "> 移動 (移動 先 を a 要 素 の href 属 性 で 設定 )</a></ 
PD> 

<P><input type="button" value=" 移 動 (移動 先 を location プ ロ パ ティ に 代入 )" 
onciick="location = "history_referrerhtmU" /></p> 
</body> 
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Internet EXp 














< 。 EFmrーー ィ PE 


動 d 動 先 を 





素 の で 











移動 (移動 先 を location プ ロバ ティ に 代入 ) 








リン ク 元 の ペー ジ 


の うろ 器 さ 9S 計 潤 O は ペース S(y 


を 困 tp:jrmw shoelsha co お ・ 旧 1 8 と の バー ジ か ら 来 た の か 調べ た い x 


リン ク 元 の ペー ジ :htp:/www. 靖 下 玉 E 諾 Ssample/14/history_referrer.html 








リン ク 先 の ペー ジ 。a 要 素 を クリ ッ ク し て リン ク す る と 、referrer プ ロ パ ティ に よっ て リン ク 元 の URI 
を 表示 し ます 






2 お owahoeshoo の ・ き で 
リン ク 元 の ペー ジ : 参 照 で きま せん 


に コ と の バー ジ か ら 来 た の か 調べ た い ※ 





リン ク 先 の ペー ジ 。 jnput 要 素 ( 下 の ポタ ン ) を クリ ッ ク す る と location プ ロ パ ティ に よっ て リン ク す る 
の で 、referrer プ ロバ ティ は リン ク 元 の URI を 参照 で きま せん 


|| referrer プロ パテ ィ ドド ドド ーー バー P238 
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HISTORY.SAMPLE-02 
ニー am 
履歴 の 前 後に 移動 する 
馬 人 3 
history,back メ ソ ッ ド を 使っ て 前 の ペー ジ に 戻る サン プル で す 。 履歴 が ある 場合 は 、[ 進 む ]、 
また は [戻る ] ボ タン で ペー ジ 移 動 が 可能 で す 。 また 、history.length プ ロ パ ティ で 履歴 数 を 参 
照 し 表示 し て いま す 。 履 歴 が な い 場 合 、Internet Explorer と Opera で は 値 が 0 に な り ま す が 、 
Firefox で は 1 に な り ま す 。 
[新しい ペー ジ へ ] ボ タン が クリ ッ ク さ れる と 、 avaScript で 作成 され た ペー ジ へ 移動 し ます 。 


その ペー ジ の [戻る ] ボ タン が クリ ッ ク さ れる と history.back 関 数 が 呼び 出さ れ 、 最 初 の ペー ジ 
へ 戻り ます 。 





/ 履 歴 数 を 参照 し て 表示 する 関数 
function /gagPgge り { 
var x = historv.length: 
Var 77/ = "<table border=1>"* 
7 += "< 人 r> く td> 履 歴 数 </td><td>"+ ォ ァ + "</td> く /tr></table>": 
// 作 成 し た HTML を 挿入 
document.qetElementById("p2").innerHTML = 7/: 


} 


// 新 し い ペ ー ジ へ 居 移 させ る 関数 
function c/7cWew/gge り { 
document.open(): 
document.write ("javaScript で 作成 され た 新しい ペー ジ で す 。「 戻 る ] ボ タン で 戻り ます 。 
<br />): 
document.write("<input type=button' value 三 戻る ' onclick=historyback0)'/>"): 
document.close(): 





} 
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ia 








<body onload="/ozggPage り "> 
<D> 
<input type="button" value=" 新 し い ペ ー ジ へ "onclick="c/7cWew/Pz9e り " /> | 後 
<input type="button" id="forward" value=" 進 む " onclick="history. | に 
forward()" /> 移 
<input type="button" id="back" value=" 戻 る " oncick="history.back()" /> | 動 
</P> | す 
<hr /> | る 
<PD 1d="p2"> | 
</P> 
| 
| 
相 - 
| 





[新しい ペー ジ へ ] を クリ ッ ク す る と 、 lavaScript で 作成 し た ペー ジ へ 移動 し ます | 


和紀 削 旭 http/meshoeshao = 上 @ ocodtesjp | 


JavaScript で 作成 され た 新しい ペー ジ で す 。 「 戻 る 」 ボ タ ノ で 戻り ます 。 








[戻る ] ボ タン を クリ ッ ク す る と 、 元 の ペー ジ に 戻り ます 





| back メソ ッ ド CODES EE まさ っ 
| | 参 照 forward メソ ッ ド 
length プロ パテ ィ ーーーーーーーーーー P239 
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リン ク で 何 も 動作 させ た く な い / 


VO1d ( 文 ) 値 を 返さ な い 





X…… メ ソ ッ ド や 数 式 な ど 





葉 胃 関数 





Void 関 数 は 何 も 値 を 返さ な い 命令 で す 。 引 数 娘 に 指定 し た 関数 や メソ ッ ド 、 数 式 は 実行 さ 
れ ま す が 、 そ れ に よっ て 値 は 返さ れ ま せん 。void(0) と 指定 する と 、0 と いう 評価 は され ます 
が スク リプ ト に まっ た く 影 響 を 与え な い 命 令 に な り ま す 。 リ ンク が クリ ッ ク さ れ た と き に 何 も 
動作 させ た く な い 場 合 な ど に 使用 し ます 。 


<a href="javascript:void(0) "> クリ ッ ク し て も 何 も お こり ませ ん 。</a> 


リン ク が クリ ッ ク さ れ て も 何 も 動作 し な いよ うに し ます 。 








Column リン ク の jlavaScript 


上 記 の 文例 の よう に <a> タ グ の href 属 性 で 指定 する リン ク 先 に javascript[lavaScript の コー ド ] 
と 記述 する と 、 指 定 し た avaScript の 処理 を 実行 で きま す 。 た と えば 


<a hre 仁 "javascript:location.reload():"> 再 読み 込み </a> 


の よう に 記述 する と 、 リ ンク が クリ ッ ク さ れ た と き に ペー ジ を リロ ー ド (location.reload()) で き 


ます 。 

し か し 、 こ の よう な 方 法 は a 要 素 本 来 の 意図 と 異な り 、 」avaScript が 無効 の 場合 に は デッド リン 
ク ( リ ンク 切れ ) に も な る の で 、 あ まり 好ま し い 利 用 法 で は あり ませ ん 。 使用 に あたっ て は 十分 注意 
し て くだ さい 。 





> ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera iOS6 Android 
O (⑳ O 〇 〇 〇 O 〇 O 〇 O 〇 O 


参照 ( 礎 編 ) javaScript 記述 の 注意 点 予 約 語 ・・ P009 
IT 
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GENGE 柱 議 還 還 王 還 語  -'…《 ぴ #@ 
文字 列 を 数 値 に 変換 し た い 


@ = DarseFloat( 太 ) 当店 数 に 変換 
@ = parseInt( 誠 , ) 数 に 変 





@…… 変 換 さ れ た 数 値 





リ 
ジ 
クタ / 
人 9 
何 
も 
動 
作 
さ 
せ 
7 
k 
な 
い 











文 …… 数 値 を 表す 文字 列 文 
人 … 基 数 【 省 略 可 】 字 
列 

関数 を 
数 

人 

文字 列 を 浮動 小数 点数 (小数 ) や 整数 に 変換 する メソ ッ ド で す 。 に 
parseFloat 関 数 換 
文字 列 を 浮動 小数 点数 に 変換 し ます 。 し 
parselnt 関 数 い 


文字 列 を 整数 に 変換 し ます 。 基数 金 を 指定 する と 、 多 進 数 で 表記 され た 文字 列 を 10 進 法 の 
整数 に 変換 で きま す ( 小 数 点 以下 は 切り 捨て ) 。 基数 を 省略 する と 文字 列 は 10 進 数 と みな され 
ます 。 

た と えば 、 以 下 の 例 で は どれ も 変数 i に は 255 が 代入 され ます 。 


i= parselnt('f ".16) ー16 進 数 ff を 10 進 法 に 変換 し て 代入 

i= parselnt("255.11".10) ー 小 数 点 以下 を 切り 捨て て 整数 に 変換 し て 代入 
1 = parselnt("377'.8) ー8 進 数 377 を 10 進 法 に 変換 し て 代入 

1= parselnt("11111111".2) ー2 進 数 11111111 を 10 進 法 に 変換 し て 代入 


yg7 = parseFloat("123.45"): 


文字 列 123.45 を 浮動 小数 点数 に 変換 し て 、 変 数 myVar に 代入 し ます 。 





yg/ = parseInt("1111", 2): 
文字 列 1111 を 2 進数 の 値 と し て 10 進 法 に 変換 し 、 変数 mmyVar に 代入 し ます 。 











と ょ ブラ ウザ 対応 表 IE10 | 1 ミ :】 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 〇 O O O ⑮⑯ O 〇 
呈 参 数 値 を 文字 列 に 変換 し た い ・・・・・・・ P248 【SAMPLE】 文字 列 を 数 値 に 変換 する ・‥・・・・ P253 
I ロ 数 式 を 数 値 に 変換 し た い ・…・・……・・ P249 
数 値 か どう か を 調べ た いい ーー P251 
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[ 浴 潜 ] 











Fe 


数 値 を 文字 列 に 変換 し た い 


@ = 文 .toString (外線 記 の 別に 変換 





@… 変 換 さ れ た 数 値 
…… 数 値 また は 数 値 の 入っ た 変数 
ぐ … 明 数 [省略 可 】 





茹 琶 還 メソ ッ ド 





数 値 を n 進 数 表記 の 文字 列 に 変換 する メソ ッ ド で す 。 基数 移 を 指定 する と 、 を 基数 と し て 
を 文字 列 に 変換 し ます 。 基数 を 省略 する と 指定 し た 基数 は 10 で ある と みな され ます 。 


77 ル 7 = 2: 


n = 77 ル Wo/7.toString(2): 
変数 myNum の 値 を 2 進数 の 文字 列 に 変換 し 、 変 数 n に 代入 し ます ( 値 は 10)。 





変 
換 





と ブラ ウザ 対応 表 IE10 IE9 1】 Fx Chrome Safarif Opera iOS6 Android 
〇 〇 O O 和 ⑳ 〇 O 〇 〇 O O 
参照 文字 列 を 数 値 に 変換 し た い ・・・・・ …・・P247 【SAMPLE】 文 字 列 を 数 値 に 変換 する ・・・・・・・ P253 
ピピ 夕 数 式 を 数 値 に 変換 し た い ・・ ・P249 
数 値 か どう か を 調べ た い ・・・-・ を P251 


248 | CHANGE.03 





EiENGE7 証 較 蘭 証 語 了 。 '' ひ ….〈《〈《〈《0《{ ト 
数 式 を 数 値 に 変換 し た い 


eval( 文 ) 





大 …… メ ソ ッ ド や 数 式 な ど 





馬 計 関数 





数 式 や 文字 列 を javaScript の 構文 と し て 実行 し ます 。 フ ォ ー ム に 入力 され た 数 式 を 演算 し た 
い 場 合 な ど に 利用 し ます 。 
た と えば 、 以 下 の 例 で は 1 行 目 は 「1+1」 と 表示 され 、2 行 目 は 「2] と な り ま す 。 
1 ミリ "1+15 
document.write(⑪): 
document.write(eval(⑪)): 
以下 の 例 で は 、"15" を 16 進 数 表記 し た と き の 文字 列 ず が 変数 (に 代入 され ます 。 
] = evalC15").toString(16): 


婦 = eval("1*2+3"): 
1*2+3 を 数 式 に 変換 し 、 演 算 結果 を 変数 m に 代入 し ます 。 





document.write(eval("123").toString(16)): 
数 値 に 変換 され た 123 を 16 進数 表記 の 文字 列 に 変換 し 、 書 き 出し ます (結果 は 7D)。 











ょ ブラ ウザ 対応 表 IE10 IE9 1 に:) Fx Chrome Safari Opera iOS6 Android 
O 〇 O O O O O O 〇 O 
参照 】 文字 列 を 数 値 に 変換 し た い ーー P247 【SAMPLE】 文字 列 を 数 値 に 変換 する ・・・・・・・ P253 
ジジ ァ 数 値 を 文字 列 に 変換 し た い ーーー・ P248 
数 値 か どう か を 調べ た い ・ ーー P251 
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yet 識 
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fi 
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こせ で 潤 夫 1 南 藻 山 問 














滋夫 











| CHANGEO5 =S。sooo 2 


文字 列 を エン コー ドン 
デコ ー ド し た い 


@ = escaDe( 太 ) 文字 列 を エン コー ド 
@⑯ = uneScaDe( 太 ) 字 釣 を テ コー ド 











文字 列 を エン コー ドン デ コー ド す る 関数 で す 。 こ れ ら の 関数 は 主 に クッ キー や フォ ー ム 内 容 
の 送信 の 際 、 文字 列 中 の 特殊 文字 や 漢字 を アル ファ ベッ ト な どの エス ケー ブ 文 字 (文字 コー ド ) 
に 変換 する た め に 使わ れ ま す 。 た と えば 、 ク ッ キ ー な ど に アル ファ ベッ ト と 数 値 以外 の デー タ 
を 書き 込む 際 に は escape 関 数 を 使い ます 。 ク ッ キ ー か ら 読 み 込ん だ デー タ を 元 の 文字 列 に 戻 
す 際 に は unescape 関 数 を 使い ます 。 
escape 関 数 

文字 列 を エス ケー ブ 文 字 に エン コー ド し ます 。 数 値 と アル ファ ベッ ト は その まま で す が 、 そ 
の 他 の 文字 は %xx(xx は 16 進 数 ) の よう な 形式 に 変換 し ます 。 た だ し 、 ブ ラウ ザ に より 文字 コ 
ー ド が 異な る 場合 が あり ます 。 
unescape 関 数 

エン コー ド さ れ た 文字 列 を デコ ー ド し て 、 元 の 文字 列 に 戻し ます 。 





77V5 か 7 = "あつ い " 
77 ル Ua/ = escape (WS7): 

String オ ブ ジ ェクト myStr の 内 容 を エン コー ド し て 変数 myVal に 代入 し ます ( 値 は 
%u3042%u3064%u3044)。 


document.write(unescape("%u306D%u3080%u3044")): 
文字 コー ド "%u306D%u3080%u3044" を 文字 列 に 変換 し て 書き 出し ます (結果 は 「 ね お むい))。 








ブラ ウザ 対応 表 IE10 IE9 1:】 Fx Chrome Safari Opera iOS6 Android 
〇 〇 O 〇 O 〇 〇 O O O 〇 O O 


l 参照 文字 コー ド を 扱い た い ・ーーーーーー P203 
ロ 使用 で きる 数 値 の 範囲 を 調べ た い ・・・…・・・・ P266 
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KG: 較 還 証 語 昌 0'〔 ハ フ パ ペペ パ 〔… パパ 
数 値 か どう か を 調べ た い 


@ = isNaN(x) 


@…… 結 果 (true ま た は false) 
胡 …… 数 値 や 文字 列 








切 提 関数 





指定 し た 値 娘 が 数 値 で は な い 場 合 は true、 数 値 の 場合 は false を 返す 関数 で す 。 な お 、NaN 
は Not a Number の 略 で す 。 


myVal = isNaN(n): 
変数 n の 値 が 数 値 か どう か を 調べ 、 結 果 を 変数 myVal に 代入 し ます 。 


if(isNaN(document.form1.txt1.value) ){ 
alert( 数 値 を 入力 し て くだ さい ): 





入力 され た 値 が 数 値 で は な い 場 合 、「 数 値 を 入力 し て くだ さい ]」 と いう ダイ アロ グ を 表示 し ます 。 








p ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 ⑯) 〇 O O 〇 〇 O 〇 9 〇 O 
上 参照 】 文字 列 を 数 値 に 変換 し た い ーー P247 
| ロ 数 値 を 文字 列 に 変換 し た い ーー P248 
数 式 を 数 値 に 変換 し た い ・- バ ーー P249 
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|CHANGE07 = = = 2 
真 偽 値 を 作成 し た い 


文 = new Boolean() 





……Boolean オ ブ ジ ェクト を 格納 する 変数 
る -… 値 省略 可 】 





オブ ジェ クト 





Boolean( 真 偽 : ブー リア ン ) は true ま た は false を 値 に 持つ オブ ジェ クト で す 。 新しい 
Boolean オ ブ ジ ェクト を 作成 する に は 、 new ス テー トメ ント (p.037) を 使用 し ます が 、 明示 
的 に Boolean オ ブ ジ ェクト を 作成 する こと は あま りあ り ま せん 。 

Boolean オ ブ ジ ェクト は 、 状 況 に 応じ て 異な る 処理 を 行い た 場合 に f ス テー トメ ント 
(p.024) と と も に 使用 され ます 。 

値 多 を 省略 する か 0 や 空 の 文字 列 ("") を 指定 し た 場合 は false、 そ われ 以外 の 場合 は true を 返し 
ます 。 


ygoo/ = new Boolean(): 


Boolean オ ブ ジ ェクト myBooL を 作成 し ます 。 





7 の goo/ = new Boolean(true): 
Boolean オ ブ ジ ェクト myBooL を true に し ます 。 








ょ ブラ ウザ 対応 表 IE10 1 |:】 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O ⑨ 〇 O O O O O 〇 


参照 (基礎 編 ) オブ ジェ クト を 扱う ・- Reis 8037 
る 不 





252 | CHANGE.07 


2 


文字 列 を 数 値 に 変換 する | 


0 
- 





2 つの 数 字 の 和 、 差 、 積 、 商 の 計算 お よび n 進 数 へ の 変換 を 行う サン ブル で す 。 入力 欄 に 数 
値 を 入力 し 、 [計算 ] ホ タン を クリ ッ ク す る と calC 関 数 に よっ て 演算 が 実行 され ます 。 また 、 [ n 
進数 に 変換 / 戻 す ] ボ タン の クリ ッ ク に よっ て 計算 結果 値 を n 進 数 に 変換 で きま す 。 





window.onload = /ag/gge: 


// 変 数 の 宣言 
Var /es0/7= 





Wa 
7 


function /oag/7g9e り { 
777E/e7 = document.getElementById("7o/777"): 


} 


// 入 力 さ れ た 値 を 計算 する 関数 
function ca/cWg7{ 
// 計 算 結果 を 変数 result に 代入 
7es/7 = eval(70/77E/e777g777.Value + 
76/77f/e77.se/ec7.options[7p/77E/e/7.e/ecf7.selectedIndex] .value + 
777/e77.77772.Value): 


7o777//e/7./es/77.Value = /es/ な 


// 計 算 結果 の 値 を n 進 数 に 変換 する 関数 

function c7a79e(7077){ 
cag/cW7: 
var 7W7 = parseFloat(/esg/7): 
7o777E/e77.resg/77.Value = 7 が Wo/7.toString(7/7): 


} 
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せ で 喧 芋 責 畑 


2 


の wl 肉 fi 画 難 本 営 判 州 さ 


骨 二 隊 隊 寺 | 


| 
| <body> 


<form action="" id=" め 7777 "> 
<D テ > 
<input type="text" name="7/777"/> 
<Sselect name="se/ec77 "> 
<option value="+"> 二 </option> 
<Option value="-">ー</option> 
<option value="*"> メ </option> 
<option value="/"> エ </option> 
</select> 
<input type="text" name="7g772"/> 
<input type="button" value=" 計 算 "onclick="ca/cWg77" /> 
</P> 
<hr /> 
<D> 
結果 : <input type="text" name="result1" onchange="this.Value=result: な 
<input type="button" Value=" ] 0 進数 に 戻す " onclick="c7ag79e(7 の )" /> 
</P> 
<D> 
1 <input type="button" value=" ら 進数 に 変換 " onclick="c/az79e(2)" /> 
<input type="button" value="8 進 数 に 変換 " onclick="c7a7ge(⑧)" /> 
<input type="button" Value=" ] 6 進数 に 変換 " onclick="c/a79e(7 の " /> 
| <7p> 
</form> 
</bodV> 
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@| GOn・ 
を " 価 [Etp://www shoeisha.co D ・ 邑 | 人 G 文字 列 を 数 値 に 変換 し .… ※ 


364566757 756567478 
































結果 :|1121134235 

















| 2 進攻 に 変換 || g 進 に 変換 || 16 進 莉 換 | 








0 計算 が 実行 され ます 





で ( 思 http:/wwwshoeisha.co  ・ 阜 O | 人 文字 列 を 数 値 に 変換 し .… メ 





364566757 756567478 





























結果 :[42q3269b | 1o 進 狐 に 戻す | 
| 2 進 青 に 変換 || 8 進 衣 に 秦 換 | に 妥 


@ 計 算 結果 が 16 進 法 に 変換 され ます 























| PaseFIOat メソ ッ ド concoumur3322 < P247 
参照 】 tOSHI0gE ペ グ ツ ド Goroom2CNIC2SRWORo P248 
| 2 人 GT AM P249 
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IMATHO1 5"5。) 2 
乱数 を 発生 させ た い 


@ = Math.random () 








馬 琶 導 メソ ッ ド 





random メ ソ ッ ド は 0 か ら 1 の 範囲 (1 は 含ま な い ) の 乱数 を 発生 させ ます 。 た と えば 、 一 定 の 
範 団 の ラン ダム な 整数 を 得 た い 場 合 に は 、 random メ ソ ッ ド で 返さ れ た 値 に 範囲 の 上 限 の 数 を 
乗じ 、floor メ ソ ッ ド や ceil メ ソ ッ ド ( 次 項 を 参照 ) を 使っ て 小数 点 以 下 を 処理 し ます 。 


例 1 : 変数 (に 0 か ら 2 まで の 範囲 の ラン ダム な 整数 (0.1.2) を 代入 し ます 。 
1 = Math.floor(Math.random() * 3): 


例 2 : 変数 | に 3 うか ら 5 ま で の 範囲 の ラン ダム な 整数 (3.4.5) を 代入 し ます 。 
1 = Math.floor(Math.random() * 3) + 3: 


yg 万 = Math.random(): 


0 か ら 1 未 満 の 乱数 を 変数 myMath に 代入 し ます 。 





yg77 = Math.floor(Math.random() * 100) + 1: 
1 か ら 100 ま で の 乱数 を 変数 myMath に 代入 し ます 。 











Column Math オ ブ ジ ェクト 


ath は 数 学 関数 を 扱う オブ ジェ クト で す 。 Math オ ブ ジ ェクト に は 三角 関数 、 平 方 根 、 累 乗 、 
対数 な どの 演算 を 行う プロ パテ ィ や メソ ッ ド が あり ます 。 新しい Math オ ブ ジ ェクト を 作成 する 際 
は new ス テー トメ ント (p.037) を 使用 する 必要 は な く 、 直 接 プ ロ パ ティ や メソ ッ ド を 記述 し て 使用 
し ます 。 























ょ ブラ ウザ 対応 表 IE10 |) Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O 〇 O 9) 〇 O 〇 O 〇 O 
| 参照 小数 点 以下 を 処理 し た い ・・・・ アーYA 
ピュ ユ ム 【SAMPLE】 ラ ンダ ム に 表示 し た 2 つの 数 字 を 比較 する 
Ps EN P267 
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| MATHO2 = =⑤so 5 還 還 還 還 還 還 
小数 点 以下 を 処理 し た い 


Math.cetl( 文 ) 小数 点 以下 を 切り 上 げ る 
Math.floor( 文 ) 小数 点 以下 を 切り 捨て る 
三 Math.round( 文 ) 小数 点 以 下 を 四捨五入 する 





@… 結 果 と し て 得 ら れる 値 
到 …… 数 値 また は 数 式 





語 皇 還 メソ ッ ド 





計算 結果 の 小数 点 以下 を 処理 し た り 、random メ ソ ッ ド で 発生 させ た 乱数 か ら 整 数 を 取得 し 
た りす る 場合 な ど に 使用 する メソ ッ ド で す 。 文 が 文字 列 の 場合 、NaN(p.251) を 返し ます 。 
ceil メ ソ ッ ド 

小数 点 以下 を 切り 上 げ 、 数 値 を 整数 に 変換 し ます 。 
floor メ ソ ッ ド 

小数 点 以下 を 切り 捨て 、 数 値 を 整数 に 変換 し ます 。 
round メ ソ ッ ド 

小数 点 以 下 の 四捨五入 を 行い 、 数 値 を 整数 に 変換 し ます 。 


ya 妨 = ceil(12.012): 
12.012 の 小数 点 以下 を 切り 上 げ て 整数 に 変換 し 、 変 数 myMath に 代入 し ます ( 値 は 12)。 


ya = floor(7g7)7 
変数 mum の 値 の 小数 点 以下 を 切り 捨て て 整数 に 変換 し 、 変 数 myMath に 代入 し ます 。 


document./77.ro7 の の / た Value = Math.round(7077): 
変数 num の 値 を 四捨五入 し て フォ ー ム の 出力 欄 ( エ レ メ ン ト 名 round_out) に 表示 し ます 。 











p ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 
〇 〇 O O (の ⑳ O O 〇 O O 〇 

参 照 乱数 を 発生 させ た い ー…… の の 7 の mm P256 (SAMPIEI フ シク (5 表示 し た 2 つの 数 字 を 比較 する 

| Lu 便 用 で きる 雪 値 の 和 団 を 調べ た い 8 PO66 の 202RTR の PRTR7S2N9NK TE -P267 
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還 癌 GtO4HT3G 避 世 





DERE 計 議 議 議 議 議 証 謗 。 {0 ハ つろ ー も ちら や を K ト ニキ 』」h 
絶対 値 を 求め た い 


@ = Math.abs( 太 ) 





@-… 結 果 と し て 得 られ る 値 
文 …… 数 値 ま た は 数 式 





メソ ッ ド 





指定 し た 数 値 の 絶対 値 を 求め る メソ ッ ド で す 。 演算 の 結果 な ど を 必ず 正 の 値 で 取得 し た い 場 
合 に 使用 し ます 。 太 が 文字 列 の 場合 、NaN(p.251) を 返し ます 。 


の 7a7 = Math.abs(-78): 


-78 の 絶対 値 を 変数 my/Math に 代入 し ます ( 値 は 78)。 





7y/ag 娘 = Math.abs(x-y): 
ーー x-y の 結果 の 絶対 値 を 求め 、 変 数 myMath に 代入 し ます 。 





数 
癌 
数 


ょ ブラ ウザ 対応 表 IE10 1 |:】 Fx Chrome Safari Opera iOS6 Android 
〇 O (⑳) 〇 O O 〇 O 〇 O (⑳) O 〇 O O 


使用 で きる 数 値 の 範囲 を 調べ た い ……・・…・P266 
中 参照 2 
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IMATHO04 = = 人 還 還 還 還 時 還 還 還 還 
円 周 率 を 使い た い 


Math.PI 





プロ パテ ィ 





円 周 率 (3.141592653589793) を 返す プロ パテ ィ で す 。 返さ れる 値 は 小数 点 以下 15 桁 で す 。 


/7 = Math.PI: 


円 周 率 を 変数 pi に 格納 し ます 。 








ょ ブラ ウザ 対応 表 IE10 1 3:】 Fx Chrome Safari Opera iOS6 Android 
〇 O (⑳) 〇 O O 〇 O ③ 〇 〇 
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数 


IKE 誠 議 議 議 較 議 議 議 証 昌 。~〔…  〕} ぞ 
三角 関数 を 使い た い 


@ = Math.sin( 太 ) 正久 (サイ ン ) を 條 出 

@ = Math.cos( 太 余弦 (コサイン ) を 算出 

@ = Math.tan( 文 正 接 (タン ジェ ント ) を 算出 

@ = Math.asin ( 文 ) 逆 正 弦 ( ア ー ク ・ サ イン ) を 算出 

@ = Math.acos( 太 逆 弦 (アー ク ・ コ サイ ン ) を 算出 
⑳ = 1 逆 正 接 (アー ク ・ タ ンジ ェ ント ) を 算出 


@ = Math.atan2 ( 文 ,) 逆 正 接 (アー ク ・ タ ンジ ェ ント ) を 算出 








人 @ 結果 と し て 得 られ る 値 
衣 …… 数 値 ま た は 数 式 
数値 また は 数 式 





メソ ッ ド 





引数 に 与え られ た 数 値 太 を 基 に 、 三 角 関 数 お よび 逆 三角 関数 に よる 演算 を 行う メソ ッ ド で す 。 
返さ れる 値 に つい て は 下 表 を 参照 し て くだ さい 。 文 が 文字 列 の 場合 、NaN(p.251) を 返し ま 
す 。 


三角 関数 (sin、cos、tan) メ ソ ッ ド 
引数 は 角度 で 、 ラ ジア ン 単 位 で 指定 し ます 。 


逆 三 角 関 数 (asin、acos、atan、atan2) メ ソ ッ ド 

sin メ ソ ッ ド と cos メ ソ ッ ド の 逆 関数 で ある asin メ ソ ッ ド と acos メ ソ ッ ド で は 、 引数 に -1 か 
ら 1 の 間 の 数 値 を 指定 する 必要 が あり ます 。 結果 は ラジ アン 単位 の 角度 が 返さ れ ま す 。atan2 
メソ ッ ド は ( 文 , 久 ) 座 標 の 角度 を 返し ます 。 
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メソ ッ ド 返さ れる 値 詩 
ahOU 。 AU 角 | 
| 人 上 | 
0 Oc を | 
.asin () ・-PI/2~PI/2 使 | 
iacos() 。 UNDNOEBIE い 
atan() ーー :PM2-PM2 軸 
atan2 () -PI^PI 


document.write(Math.sin(1)): 
1 の サイ ン を 求め て 表示 し ます 。 


document.write(Math.cos(7g/) ): 
変数 num の 値 の コサイン を 求め て 表示 し ます 。 


document.write(Math.tan (1) ) 
1 の タン ジェ ント を 求め て 表示 し ます 。 


ヵ = Math.asin(1): | 
1 の アー ク ・ サ イン を 求め て 変数 b に 代入 し ます 。 


yg 妨 = Math.acos(7g77): | 
変数 num の アー ク ・ コ サイ ン を 求め て 変数 my/ath に 代入 し ます 。 


ya 妨 = Math.atan(1): 
1 の アー ク ・ タ ンジ ェ ン ト を 求め て 変数 myMath に 代入 し ます 。 | 


ya の = Math.atan2( ル x): 
変数 xy から y/x の アー ク ・ タ ンジ ェ ン ト を 求め て 変数 myMath に 代入 し ます 。 








ブラ ウザ 対応 表 IE10 |) 3:) Fx Chrome Safari Opera iOS6 Android 
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ロ 





数 | 


数 
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MATHOO SS※S= う % ぺ 2 
対数 を 求め た い 


Math.E 自然 対数 の 底 e を 参照 
Math.LN10 10 の 自然 対数 を 参照 (og10) 
Math.LN2 2 の 自然 計数 を 参照 (log2) 
Math.LO0G10E @ の 常用 対数 を 参照 (loge) | 
Math.LOG2E e の 2 を 底 と する 対数 を 参照 (log2e) | 
Math.log( 文 ) e を 底 と する 対数 を 算出 (log) | 
Math.exD( 文 ) e の べき 本 を 和 出 


@ = Math.Dow(, 人 ) べき 果 を 旬 H(@^) 


廊 …… 値 も し く は 数 式 
信 …… 結 果 と し て 得 ら れる 値 
全数 値 ま た は 数 式 
る …… 数値 また は 数 式 














プロ パテ ィ (Math.E、 Math.LN10、 Math.LN2、 Math.LOG10E、 Math.LOG2E) 
メソ ッ ド (Math.log、 Math.exp、 Math.pow) 


5 





対数 に 関す る プロ パテ ィ や メソ ッ ド で す 。 


E プ ロ パ ティ 
自然 対数 の 底 の 値 を 返し ます 。 値 は 約 2.718 で す 。 


log、exp メ ソ ッ ド 
log メ ソ ッ ド は 引数 と し て 与え た 数 の 自然 対数 ( 底 は e)、exp メ ソ ッ ド は e の べき 乗 を 返し ま 
す 。 文 が 文字 列 だ っ た 場合 、NaN(p.251) を 返し ます 。 


Pow メ ソ ッ ド 
を 4^ 乗 し た 値 を 返し ます 。 金 が 文字 列 だ っ た 場合 、NaN を 返し ます 。 
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document.write(Math.E): 
自然 対数 e の 底 を 表示 し ます 。 


77y/Ma 妨 = Math.LN10: 
10 の 自然 対数 を 変数 myMath に 代入 し ます 。 


ya 万 = Math.LN2: 
2 の 自然 対数 を 変数 myMath に 代入 し ます 。 


ya の = Math.L0G10E: 
e の 常用 対数 を 変数 myMath に 代入 し ます 。 


7ya 妨 = Math.L0G2E: 
e の 2 を 底 と する 対数 を 変数 myMath に 代入 し ます 。 


ya 妨 = Math.log(10): 
10 の 自然 対数 を 求め 、 変数 myMath に 代入 し ます 。 


ya = Math.exp(5): 
e の 5 乗 を 求め 、 変 数 myMath に 代入 し ます 。 








document.write(Math.pow(37): 
3 の ( 乗 を 求め 、 表 示し ます 。 





ヶ ブラ ウザ 対応 表 IE10 1 や ) 13: Fx Chrome Safari Opera iOS6 Android 
(9) O O O O O O O O 
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ロ 【SAMPLE】 対 数 、 平 方 根 、 べ き 乗 を 算出 する ・・P270 
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NN (emem 「 


UE 較 議 王 詳 詳 証 。 〔 ハ や t〔』。 
数 値 の 大 小 を 比較 し た い 


人 @ = Math.max( 文 , 六 , as 最大 の 数 値 を 得る 
| 人 @ = Math.min( 文 , 文 , ...) 最小 の 数 値 を 得る 





人 @…- 結 果 と し て 得 られ る 文字 列 
娘 …… 数 値 ま た は 数 式 





1 茹 琶 間 メソ ッ ド 


ーー 


引数 に 指定 し た 複数 の 数 値 の 大 小 を 比較 し ます 。 max メ ソ ッ ド は 一 番 大 きい 数 値 、min メ ソ 
ッ ド は 一 番 小 さい 数 値 を 返 し ます 。 文 が 文字 列 の 場合 、NaN(p.251) を 返し ます 。 引数 が 与 
』 えら れ な い 場 合 は Infinity を 返し ます 。 


yg の = Math.max(8, 20): 


8 と 20 を 比較 し 、 大 きい 方 の 値 を 変数 myMath に 代入 し ます ( 値 は 20)。 





yg 妨 = Math.min( ぅ の ): 
a と b を 比較 し 、 小 さい 方 の 値 を 変数 myMath に 代入 し ます 。 





4 
学 
関 
数 


〇 ー 際 〇 S 覆 


> ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 








| 参照 使用 で きる 数 値 の 範囲 を 
ネム [SAMPLE] ラン ダム に 表示 
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MATH.08 


平方 根 を 求め た い 











を | 
財 
| 
人 き = Math.sqrt( 太 ) 平方 根 を 算出 (/ 太 ) た 
信 = Math.SORT2 2 の 平方 根 を 参照 ( ソ 2 ) り | 
W = Math.SQRT1 2 2 の 平方 根 の 半分 の 値 を 参照 (2 /2) エ 
還 思 es ンー ーーー 根 
@… 結 果 と し て 得 ら れる 値 和 
友 …… 数 値 また は 数 式 
メソ ッ ド (Math.sqrt)、 プ ロ パ ティ (Math.SQRT2、 Math.SQRT1_2) 月 | 





平方 根 を 求め る メソ ッ ド や プロ パテ ィ で す 。 
sqrt メ ソ ッ ド 
引数 に 指定 し た 数 値 の 平方 根 を 返す メソ ッ ド で す 。 文 が 文字 列 の 場合 、NaN(p.275) を 返 
し ます 。 
SQRT2 プ ロ パ ティ 
2 の 平方 根 の 値 (1.4142135623730951) を 表す プロ パテ ィ で す 。 
SQRT1_2 プ ロ パ ティ 
2 の 平方 根 の 半分 の 値 (0.7071067811865476) を 表す プロ パテ ィ で す 。 


yag 娘 = Math.sqrt(7g77): 
変数 num の 平方 根 を 求め 、 変 数 myMath に 代入 し ます 。 


ya 娘 = Math.SQRT2: 
2 の 平方 根 を 変数 myMath に 代入 し ます 。 


yg 娘 = Math.SQRT1_2: 
2 の 平方 根 の 半分 の 値 を 変数 myyMath に 代入 し ます 。 








と ブラ ウザ 対応 表 IE10 1 1 Fx Chrome Safari Opera iOS6 Android 
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| 参 照 使用 で きる 数 値 の 範囲 を 調べ た い ・・・・・・・・・ P266 
IT 【SAMPLE】 対数 、 平方根 、 べ き 乗 を 算出 する ・・P270 








AMATH.08 | 265 





っ 4 
E3 
語 | 
っ 4 





DERE 誠 議 議 議 詳 議 請 0〔 ひ ハー あ ぴ ぬ ポ C 〇 〕 ぷ やこ ニ も …0|ー 
使用 で きる 数 値 の 範囲 を 調べ た い 


Number.MAX_ VALUE 合用 可能 な 最大 値 を 参照 
Number.MIN_VALUE 使用 可能 な 最小 値 を 参照 
Number.NaN 数 値 以外 を 参照 


Number.NEGATIVE_INFINITY 人 の 押 限 大 の 値 を 
Number.P0SITIVE_INFINITY 箇 了 大 の 介 を を 





プロ パテ ィ 





JavaScript で 使用 可能 な 数 値 の 最大 値 や 最小 値 な ど を 保持 し て いる プロ パテ ィ で す 。 こ れ ら 
の プロ パテ ィ を 利用 すれ ば 、 使 用 で きる 数 値 の 範囲 を 調べ た り 、 数値 が javaScript で 扱え る 範 
囲 な の か を 調べ る こと が で きま す 。 

NaN は 数 値 以 外 で ある こと を 表す 特別 な 値 で 、 Math オ ブ ジ ェクト の 各 メ ソ ッ ド の 3| 数 に 数 
値 や 数 式 以外 を 指定 し た 場合 に 返さ れ ま す 。 


aa 
alert(NumberMAX_VALUE): 


使用 可能 な 最大 値 を ダイ アロ グ に 表示 し ます 。 
alert(NumberMIN_VALUE): 

使用 可能 な 最小 値 を ダイ アロ グ に 表示 し ます 。 
document.write(isNaN(yWe77 .NaN)): 

数 値 オ ブ ジ ェクト myNun が 数 値 か どう か を 調べ 、 表 示し ます (結果 は true)。 
alert(Number.NEGATIVE_INFINITY): 

使用 可能 な 負 の 最大 値 を ダイ アロ グ に 表示 し ます 。 
alert(POSITIVE_INFINITY): 
| 信用 可能 な 無限 大 の 値 を ダ イア ログ に 表示 し ます 。 




















Column Number オ ブ ジ ェクト 


Number は 数 値 を 扱う オブ ジェ クト で す 。 」avaScript で 使用 可能 な 最大 値 、 最 小 値 、 無限 大 な ど 
を 保持 し て いま す 。 





ブラ ウザ 対応 表 IE10 IE9 3:] Fx Chrome Safari Opera iOS6 Android 
O (G) 〇 O O 〇 O 〇 〇 O 〇 O 〇 O 〇 O 


数 値 か どう か を 調べ た たい ・・P251 
参照 2 
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MATH.SAMPLE-01 


ラン ダム に 表示 し た 
2 つの 数 字 を 比較 する 






現在 表示 され て いる 1~13 の 数 字 と 、 次 に ラン ダム に 表示 され る 1~13 の 数 字 と の 大 小 を 当 
て る ゲー ム の サン プル で す 。 ま ず 、random メ ソ ッ ド を 使用 し て 乱数 を 取得 し ます 。1~13 ま 
で の 数 字 を ラン ダム に 取得 する に は 、 乱数 を 13 を 乗じ 1 を 加え ます 。 

[HI を 選択 ]、[LOW を 選択 ]1 の 0 どちら か の ボタ ン が クリ ッ ク さ れる と 新た な 乱数 を 作成 し ま 
す 。 続い て 、2 つ の ラン ダム な 数 値 を max メ ソ ッ ド また は min メ ソ ッ ド で 比較 し 、 結 果 を 表示 
し ます 。 


D 
Var 777: 
Var 7772: 


Var 777/e/7: 
Var の //e/7: 
Var 7//e/7z 
Var /ow//e/7: 


ペー ジ 読 み 込み 時 の 処理 の 関数 

function /pagPgge り { 
777E/e77 = document.getElementById( "7 の "): 
/Z/e/77 = document.qetElementById(" の "): 
万 E/e7 = document.getElementById(" の 7"): 
/ow/e77 = document.qetElementById(" の 0W"): 
///e/7.innerHTML = "HI また は LOW を 選択 し て 下さ い ": 
7777 = Math.floor(Math.random() * 13) + 1: //1ー13 ま で の ラン ダム な 数 字 を 作成 
7//77E/e77.innerHTML = 777: 
7e77.disabled = false: 
/ow//e77.disabled = false: 





HI" ま た は "LOW" の ボタ ン を クリ ッ ク し た と き の 処 理 の 関数 
function c/7c ん 7 (Wg//e){ 
var 7g77 = "<input type=button' id='retry' value デ リト ライ ' onclick デ loadPage0'/>" 
Var 7 = "あな た の 勝ち で す " + 7/g 婦 : 
Var / の ps = "あな た の 負け で す " + /g7: 
7772 = Math.floor(Math.random() * 13) + 1: 


守 (7g777 == 7772){ 同数 の 場合 
の 7e/7.1innerHTML = /os な 
777/e/7.1nnerHTML += "= リ ェ 7772: 
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汐 


ー 
ーー 





国 画 9 両 此 ひ 0W 骨 


け 2 


の udt 雪 氏 RI 此 り DrK 引 紅 生 玉 民 NN 











}else if(7z72 == Math.min (7g777, 7 の ) ){ //LOW の 場合 
ザ (value == "hi"){ 
の //e/7.innerHTML = 77: 
777E/e/77.innerHTML += "> リエ 7772: 
}else{ 
/Z/e/7.innerHTML = /ps た 
777/e/77.1nnerHTML += " <" 77772: 
} 
}else if(7u772 == Math.max(7/777, 7/772) ) { HI の 場合 
if(value == "low"){ 
の 7e/7.1innerHTML = 77: 
7g77/e/7.1innerHTML+=" <" + 7 の 
}else{ 
//e/7.innerHTML = /os な 
777/e77.innerHTML += "> リエ 77772: 


I } 








7E/e77.disabled = true: 
/ow/e/7.disabled = true: 








※ レ イア ウト は 外部 CSS で 指定 し て いま す 
<body onload="/oagPgge り "> 
<diV> 
+ <b id=" の "></b> 
</div> 
<div id="77"> 
</div> 
<diV> 
<input type=" の 77o7” id="btnHI" Value=" 昌 を 選択 " onclick="c/7ckg77/77 り " /> 


円 <input type="button" id=" の の "value="LOWV を 選択 " 
語 onclick="c/7ckg777o り " /> 
数 </div> 

</body> 
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と 


昼 数 学 関数 を 使い た い 


HI また は LOW を 選択 し て 下さ い 


www.shoeisha.co の ・ 忠 C 





1』 フ 
2 
ダ 
ム 
| に 
表 
| 小 
し 
中 
| 
っ う 
| の 
記 
子 
| を 
| 比 
較 
す 
る 





⑩1 一 13 の 数 字 が ラン ダム に 表示 され ます 。 次 に ラン ダム に 表示 され る 1 一 13 の 数 字 を 予想 し まし よう 。 
人 も 現在 表示 され て いる 13 の ほう が 大 きい と 予想 し た 場合 は [HI を 選択 ] ポ タン 
を クリ ッ ク し ま 


X 


【 凍 誠 測 で http://wwwrshoeisha.co  ・ 避 〇 | 人 数 学 関数 を 使い た い 
あな た の 勝ち で す | =f 


う >11 





HI を 選択 LOW を 選択 





@ ラ ンダ ム に 選ば れ た 値 は 11 で し た 。13 の ほう が 大 き な 値 な の で 、「 あ な た の 勝ち で す 」 と 表示 され ます 





照 adOTR が 2 の 本 の 0 x お 256.、mInX ツ Ro P264 
| 委 虹 floor メソ ッ ド … 革 ) 
max メソ ッ ド EE また まま ま た ま ま ま たま ま まま 3 





MATH.SAMPLE-01 | 269 





MATH.SAMPLE-02 


対数 、 平 方 根 、 
べき 乗 を 算出 する 












対数 、 平 方 根 、 べ き 乗 を 算出 する サン プル で す 。2 を 10 乗 し た 値 、4 の 平方 根 、2 の 平方 根 
の 半分 の 値 、2 の 値 、 自 然 対数 の 値 な ど を 表示 し ます 。 











document.write("<b>2 の 10 乗 = </b>", Math.pow(2, 10), "<br />"): 
document.write("<b>y 4= ニ </b>"。 Math.sqrt(4), "<br 2): 
document.write("<b>y 2 の 1/2= </b>"。 Math.SQRT1_2, "<br />"): 
document.write("<b>y 2= </b>"。 Math.SQRT2,"<hr />"): 
document.write("<b>E= </b>", Math.E, "<br >"): 
document.write("<b>LN10=</b>", Math.LN10, "<br />"): 
document.write("<b>LN2= </b>", Math.LN2, "<br />"): 
document.write("<b>LOG10E= </b>", Math.L0G10E, "<br />"): 
document.write("<b>LOG2E= </b>", Math.L0G2E, "<br />"): 
document.write("<b>log(100)= </b>", Math.log(100), "<br />"): 
document.write("<b>exp(100)= </b>", Math.exp(100)): 






















【 芋 民 光代 http://wwwshoeisha.co の ・ 品 O 


2 の 10 乗 = 1024 
v4= 2 

Y2 の 172= 0.7071067811865476 
2= 1.4142135623730951 





人 人 - 斑 要 - べ き 系. * | 








数 
学 
関 
数 






= 2.718281828459045 
LN10=2.302585092994046 

LIN2= 0.6931471805599453 
LOG10E= 0.4342944819032518 
TLOG2E= 1.4426950408889633 
log(100)= 4.605170185988092 
exp(100)= 2.6881171418161356e+43 










E プ ロ パ ティ ーー ドー ドー ドー ドー ドー ドー P262 exp メソ ッ ド 
参 R P262 pow メソ ッ ド 
LN2 プロ パテ ィ ー ーーーーーーー… P262 sqrt メ ソ ッ ド 


LOG10E プロ パテ ィ ーー ーー ドーーー… P262 SQRT2 プロ パテ ィ ー 
LOG2E プロ パテ ィ ー… ドー ドーー ーー P262 SQRT1_2 プ ロ パ ティ ーー P265 
log の ジッ ド kwswwismseewiweesesawwassee P262 
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MATH.SAMPLE-03 


使用 で きる 数 値 の 
範囲 を 調べ る 


数 値 オ ブ ジ ェクト が 持つ プロ パテ ィ の 値 を 表示 する サン プル で す 。 演算 な ど を 行う 上 で 、 
」avaScript で 使用 で きる 最大 値 や 最小 値 を 参照 し ます 。 





document.write("<b>MAX_VALUE =</b>", NumberMAX_VALUE, "<br /> り ): 
document.write("<b>MIN_VALUE =</b>", Number.MIN_VALUE, "<br />): 
document.write("<b>NaN =</b>", Number.NaN, "<br /"): 
document.write("<b>NEGATIVE_INFINITY =</b>", NumberNEGATIVE_INFINITY, 
"<br />『): 

document.write("<b>POSITIVE_INFINITY =</b>", Number.POSITIVE_INFINITY): 





Internet Exp 






間 選 骨 人 き http://www.shoeisha.co の ・ 思 〇 参 使用 で きる 数 値 


MLAX VALUE =1.7976931348623157e+308 
MIN_VALUE =5e-324 

NaN =NaN 

NEGATIVE INFINTTY =-Infinity 

POSITIVE _TNEFHNTTY =Infinity 








の > 誤 R 国 仙 S 高 難 の ON 骨 浴 NO い dEE 提 Q 滞 0 > 











P266 NEGATIVE_INFINITY プロ パテ ィ ー……… P266 
P266 POSITIVE_INFINITY プロ パテ ィ ー…………… P266 
P266 


[ 器 末 性 著 ] 


| PT 照 MAX_VALUE プロ パテ ィ 
ピュ ネバ MIN_VALUE プロ パテ ィ ・…・ 
NaN プロ パテ ィ 
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オ 
フ 
P4 
エ 
ク 
ト 





| 
独自 の オブ ジェ クト を 使い た い 


太 = new Object() 





…… 新 し い オ ブ ジェ クト を 格納 する 変数 
ぐる …- 値 省略 可 】 





オブ ジェ クト 





新しい オブ ジェ クト を 生成 する に は 、 new ス テー トメ ント (p.037) を 使用 し ます 。 
JavaScript の 仕様 と し て あら か じ め 用 意 さ れ て いる オブ ジェ クト 以外 に 独自 に オブ ジェ クト を 
作成 し た い 場合 に は 、 こ の よう に new ス テー トメ ント を 使用 し ます 。 


』 オブ ジェ クト 作成 時 の 引数 と し て 指定 する 値 に は 数 値 、 論 理 値 、 文 字 列 、 関 数 と いっ た 基本 


型 の オブ ジェ クト を 指定 で きま す 。 ま た 、 引 数 を 指定 し た 場合 、 オブ ジェ クト を 参照 する と 、 
プロ パテ ィ の な い 新 し く 作 成 し た オブ ジェ クト が 返り ます 。 引数 を 指定 し 、 オ ブ ジ ェクト を 参 
照 し た 際 は 引数 で 指定 し た オブ ジェ クト を 返し ます 。 


7ew0/7 = new 0bject(): 


新規 に Object オブ ジェ クト newObj を 生成 し ます 。 








ょ ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O 〇 O 〇 〇 〇 〇 O 
参照 (基礎 編 ) オブ ジェ クト を 扱う ・…・・・…・・ P037 
5T 【SAMPLE】 オ ブ ジ ェクト を 扱う ・…・--…・ P278 
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9) は ER ア 4 


オブ ジェ クト の コン スト ラク タ や 
値 を 参照 し た い 


文 。COnStructor オブ ジェ クト の コン スト ラク タ を 参照 
金 = NaNUB0II オブ ジェ クト の 値 を 返す 


太 …… オ ブ ジ ェクト 名 ム …… 値 











プロ パテ ィ (constructor)、 メ ソ ッ ド (valueO) 





オブ ジェ クト の コン スト ラク タ ( 生 成 関数 : p.284) の 値 を 参照 し ます 。 
constructor プ ロ パ ティ 
その オブ ジェ クト を 作成 する と き に 実行 され る コン スト ラク タ を 返す プロ パテ ィ で す 。 コ ン 
スト ラク タ の 内 容 を 知り た いと き は toSource メ ソ ッ ド (p.274) を 使い ます 。 
valueOf メ ソ ッ ド 
オブ ジェ クト の 値 を 返す メソ ッ ド で す 。 返す 値 は 下 表 の 通り で す 。 
オブ ジェ クト  !valueOf メ ソ ッ ド の 動作 


, ArraV ArraytoString メ ソ ッ ド や Arrayjoin メ ソ ッ ド と 同じ よう な 値 を 返す 
Boolean Object に 格納 され て いる ブー ル 値 を 返 す 
! Date  」 協 定 世界 時 の 1970 年 1 月 0 日 0 時 0 分 0 秒 か ら の 経過 時 間 を 表す ミ リ 秒 単位 の 数 値 を 返す 


の 
Number オフ ジェ ク ト に 格納 され て いる 数 値 を 返す CCNAL2 り EEES 記 YR 


Object オブ ジェ クト 自体 を 返す 
. String オプ ジェ クト に 格納 され て いる 文字 列 を 返す 


直接 オブ ジェ クト を 参照 すれ ば 、 オ ブ ジ ェクト の 値 が 返る た め 、 普 段 参照 する 際 に は 使わ な 
く て も 構い ませ ん 。 下 の 文例 の 2 番目 は document.writetnewObj): と し て も 同じ で す 。 


alert(7ew0/7.constructor): 


newObj オブ ジェ クト の コン スト ラク タ を ダイ アロ グ に 表示 し ます 。 
document.write(7ew の が.value0f()): newObj オブ ジェ クト の 値 を 書き 出し ます 。 








p ブラ ウザ 対応 表 IE10 1 13:] Fx Chrome Safari Opera iOS6 Android 
O 〇 〇 〇 〇 O O ひ O O O 〇 O 〇 
| 参照 プロ グラ ム の 内 容 を 知り た い ・・・・ーー・ P274 
n 関数 呼び 出し の 情報 を 調べ た い ・…・…・・P281 
【SAMPLE】 オブ ジェ クト を 扱う ・-‥・・‥・・・ P278 
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| OBIECT03 = 22 
プロ グラ ム の 内 容 を 知り た い 


文 .toSource() 





…… 関 数 や オブ ジェ クト 名 





茹 琶 メソ ッ ド 





指定 し た 関数 や オブ ジェ クト の 内 容 を 表示 し ます 。 得 られ る 値 に つい て は サン プル (p.275) 
を 参照 し て くだ さい 。 


document.write (7ew0 が 7.toSource()): 


newObj| オブ ジェ クト の スク リプ ト の 内 容 を 書き 出し ます 。 





ょ ブラ ウザ 対応 表 IE10 1 ミリ IE8 Fx Chrome Safari Opera iOS6 Android 
X X 3 〇 〇 し X X X 


| 参照 オブ ジェ クト の コン スト ラク タ の 値 を 参照 し た い 
ク 衝 GS P273 


【SAMPLE】 ブ ログ ラム の 内 容 を 表示 する ・・・ P275 
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OBIECTSAMPLE-01 
プロ グラ ム の 
内 容 を 表示 する 









文字 列 オ ブ ジ ェクト 、 日 付す ブ ジ ェクト 、 プ ー ル 型 オ ブ ジ ェクト 、 配列 オブ ジェ クト お よび 
関数 の 内 容 を 取得 し 、 表 示す る サン プル で す 。 値 に 加え て toSource メ ソ ッ ド を 使用 し て 各 オ 
ブ ジ ェクト 、 関 数 の 内 容 を 取得 し 、 表 示さ せ て いま す 。 Internet Explorer、Opera は 
toSource メ ソ ッ ド に 対応 し て いな いた め 、 処 理 を 分 岐 させ 「 参 照 で きま せん 」 と 表示 する よう 
に し て いま す 。 





// 変 数 の 宣 


Var 7eWS が 7 = new 0bject("JavaScript 辞 典 "): 

Var ea7e = new Date(document.lastModified): 

Var egoo/ = new Boolean(true): 

Var /e/77gy = new Array( "ホー ムペ ー ジ 辞典 " "HTML タ グ 辞 典 " ツ "スタ イル シー ト 辞 典 "): 
var /oo/7 = navigator.appName.index0f("Microsoft")<0: 

var /oo/ の / = navigator.appName.index0f("0pera")<0: 

Var 77777 = リリ の: 


各 オ ブ ジ ェクト の 情報 を 参照 し て 表示 する 関数 
function /gag/age7 
文字 列 オ ブ ジ ェクト の 参照 
7 += "<b> 文 字 列 オ ブ ジ ェクト :</b>"+ eS が + "<br > 
/777/+= "<b> オ ブ ジ ェクト の 値 :</b>" + 7ewS7r.value0f() + "<br /> 和 の 





(の go/7E &8 poo/0/){ 
777/ += "<b> オ ブ ジ ェクト の 内 容 : </b>" + 7ewS な が.toSource() + "<hr > 
}else{ 
77/ += "<b> オ ブ ジ ェクト の 内 容 : </b> 参 照 で きま せん <hr />" ァ 
} 
日 付 別 オブ ジェ クト の 参照 


777/ += "<b> 日 付す ブ ジ ェクト :< く /b>" + 7ew の afe + "<br /> リ 
77/ += "<b> オ ブ ジ ェクト の 値 : </b>" + 7ew/aze.value0f() + "<br /> リ の: 
守 ( の go/7E &&. poo/0/){ 
html += "<b> オ ブ ジ ェクト の 内 容 : </b>" + 7ew の ag7e.toSource() + "<hr > 
}else{ 
7 += "<b> オ ブ ジ ェクト の 内 容 : </b> 参 照 で きま せん ぐ hr />": 
} 


// ブ ー ル 型 オ ブ ジ ェクト の 参照 


777/ += "<b> ブ ー ル 型 オ ブ ジ ェクト :</b>" + 7ewgoo/ + "<br />"z 
7777/ += "<b> オ ブ ジ ェクト の 値 :</b>" + 7ewgoo/.value0f() + "<br /> リ の: 
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if( の oo/7E && oo/0/){ 

77777 += "<b> オ ブ ジ ェクト の 内 容 : </b>" + 7ewgoo/.toSource() + "<hr />": 
}else{ 

777 += "<b> オ ブ ジ ェクト の 内 容 : </b> 参 照 で きま せん <hr />"* 
} 


配列 オブ ジェ クト の 参照 
7 += "<b> 配 列 オ ブ ジ ェクト : </b>" + 7ew477g ル + "<br /> リ の: 
7777 += "<D> オ ブ ジ ェクト の 値 : </b>" + 7ew4/ygy.value0f() + "<br /> ッ 
if( カ go/7F && カ oo/0/){ 


7777/ += "<b> オ ブ ジ ェクト の 内 容 : </b>" + 7ew4/7ay.toSource() + "<hr /> リ の 





}elset 
77/ += "<b> オ ブ ジ ェクト の 内 容 : </b> 参 照 で きま せん <hr />": 
} 
』 関数 オブ ジェ クト の 参照 
if(2oo/7E && 2oo( の の 
77777 += "<b> 関 数 の 内 容 : </b>" + ap/e.toSource() + "<hr の 
}else{ 
77/ += "<b ン > 関数 の 内 容 : </b> 参 照 で きま せん <hr />"* 
1 } 


document.qetElementById(" の ogy").innerHTML = /7/: 





る た め の サ ンプ ル 関 数 
DO00 な ap(e り { 
7e4/7gy = neW Array( "ホー ムペ ー ジ 辞典 ","HTML タ グ 辞 典 " "スタ イル シー ト 生 典 "): 
77777 += "配列 オブ ジェ クト :"+ 7ew4/7g: 
7777/ += "オブ ジェ クト の 値 :" + 7ew4/7gy.Value0f(): 
77 += "オブ ジェ クト の 内 容 :"+ 7ew47ay.toSource (): 











<body id="body" onload="/oagPage り "> 


</bodV> 
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文字 列 オ ブ ジ ェクト :JavaScrpe 放 典 
オブ ジェ クト の 値 :JavaScripe 冬 典 
オブ ジェ クト の 内 容 : 参 照 で きま せん ド 


日 付 オ ブ ジ ェクト :Sat May 11 05-00:05 UTC+0900 2013 
オブ ジェ クト の 値 : 1368216005000 
オブ ジェ クト の 内 容 : 参照 で きま せん 


ブー ル 型 オブ ジェ クト :tnue 
オブ ジェ クト の 値 :tue 

オブ ジェ クト の 内 容 : 参 照 で きま せん 
配列 オブ ジェ クト : ホ ー ム ペー ジ 辞 典 HTML タ グ 詳 典 . ス タイ ル シ ー ト 辞典 


オブ ジェ クト の 値 : ホ ー ム ペー ジ 辞 典 HTML タ グ 辞 典 スタ イル シー ト 辞 典 
オブ ジェ クト の 内 容 : 参 照 で きま せん 


関数 の 内 容 : 参 照 で きま せん 





























Internet Explorer は toSource メ ソ ッ ド に 対応 し て いな い の で 、 オ ブ ジ ェクト の 内 容 に は 
「 参 照 で きま せん 」 と 表示 され ます 








Firefox 








で 主 - cocgie 
し か ンー 分 拉 し て 無料 の オブ あな た の 析 c っ ut(KO.。 | x 
文字 列 オブ ジェ クト :JavaScript 冬 典 

オブ ジェ クト の 値 :JavaScript 詳 典 

オブ ジェ クト の 内 容 :(nsw String“JavaScriptYu8F9EYu5178*)) 


を き shoelsha.comVbockypux/)Ssample/1 の | を 命 末 ・ 















日 付 オブ ジェ クト : Sat May 11 2013 06.4508 GMT+0900 
オブ ジェ クト の 値 : 1368222308000 
オブ ジェ クト の 内 容 :(new Date(1368222308000)) 


ブー ル 型 オブ ジェ クト :trus 
オブ ジェ クト の 値 :trus 
オブ ジェ クト の 内 容 :(new Boolsan(trus)) 


配列 オブ ジェ クト : ホ ー ム ペー ジ 辞 典 .HTM_ タ グ 辞 典 ス タイ ル シ ー ト 評 典 
オブ ジェ クト の 値 : ホ ー ム ペー ジ 辞 典 HTML タ グ 辞 典 ス タイ ル シ ー ト 辞典 
オブ ジェ クト の 内 容 :["\u30DB\u30FC\u30EOYud0DAYu30FC\u30B8Yu8F9EYu5178", 
“HTML_Yu30BFYu30BOYu8F9EYu5178", “\u30B9Yu30BFYu30A4Yu30EBYu30B7\u30FC 
Yu30O8\u8F9EWu5178"] 
関数 の 内 容 :function fSampleO[ newArray = new Array(~ ホ ー ム ペー ジ 辞 典 "HTM_ タ グ 
辞典 “スタ イル シー ト 辞 典 ”) html += “配列 オブ ジェ クト :^ + newArray: html += “オブ ジェ ク 
ト の 値 :~ + newArrayvalueOfO: html += “オブ ジェ クト の 内 容 :~+ newAray toSource0] 


















































オブ ジェ クト や 関数 の 内 容 が 書き 出さ れ ま す 


上 用: 参 050UIC6X 槍 GSENSEC 223538 ち ここ P274 
ず 
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オブ ジェ クト を 扱う 





種 オブ ジェ クト の 作成 元 、 値 を 表示 する サン プル で す 。 文字 列 オ ブ ジ ェクト 、 日 付 オ ブ ジ 
ェクト 、 配 列 オ ブ ジ ェクト を 作成 し て 、 そ れ ぞ れ 作 成 元 の オブ ジェ クト と オブ ジェ クト の 値 を 
参照 し て いま す 。 







変数 の 宣言 
Var 7ew0 の 7 = new 0bject("」avaScript 辞 典 "): 
Var 7ew の ae = new Date(document.lastModified): 
Var 7egoo/ = new Boolean(true): 
Var 7ew4/7ay = new Array( "ホーム ペー ジ 辞 典 ", "HTML タ グ 辞 典 "" ス タイ ル シ ー ト 辞典 "): 
// 文 字 別 オ ブ ジ ェクト の 参照 
document.write("<b> 文 字 列 オ ブ ジ ェクト :</b>", 7ew0 の 7, "<br />"): 
document.write("<b> 作 成 元 の コン スト ラク タ : </b>", 7ew の 7.constructor "<br 
> 
document.write("<b> オ ブ ジ ェクト の 値 :</b>", 7ew の が の .value0f(), "<hr />"): 

日 付 列 オブ ジェ クト の 参照 
document.write("<b> 日 付す ブ ジ ェクト : </b>『, 7ew の ae, "<br />"): 
document.write("<b> 作 成 元 の コン スト ラク タ : </b>", 7ew/a7e.constructor, "<br 
2 ト 
document.write("<b> オ ブ ジ ェクト の 値 : </b>", ew/aze.value0f(), "<hr />"): 
// ブ ー ル 型 オブ ェクト の 参照 
document.write("<b> ブ ー ル 型 オ ブフ ジェクト:</b>", 7ewgoo7, "<br />"): 
document.write("<b> 作 成 元 の コン スト ラク タ : </b>", 7ewgoo/.constructor, "<br 
>: 
document.write("<b> オ ブ ジ ェクト の 値 :</b>", 7ewgoo/.value0f(), "<hr />"): 

/ 配 列 オ ブ ジ ェクト の 参照 
document.write("<b> 配 列 オ ブ ジ ェクト :</b>", 7ew477gy, "<br />"): 
document.write("<b> 作 成 元 の コン スト ラク タ : </b>", 7ew47gy.constructor, "<br 
ん": 
document.write("<b> オ ブ ジ ェクト の 値 : </b>", 7ew4/7gy.Value0f()): 
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| Object オブ ジェ クト 
IE 所 : 参 Constructor プロ パテ ィ ・ 


文字 列 オ ブ ジェ クト : JavaScrnpe キ 典 
オブ ジェ クト の 値 :JavaScripe 典 
日 付 オプ ジェ クト : Sat May 11 06-45-34 UTC+0900 2013 


作成 元 の コン スト ラク タタ : fnnction Date() { [nattve code] } 
オブ ジェ クト の 値 : 1368222334000 







ブー ル 型 オブ ジェ クト : tue 
オブ ジェ クト の 値 :true 






www.shoeisha.comVbo。 【R ネ  】 


文字 列 オ ブ ジ ェクト : JavaScnpt 典 
作成 元 の コン スト ラク タ : function Strimg() | [mative code] ! 
オプ ジェ クト の 値 : JavaScni 誠 典 





日 付 オ ブ ジ ェクト : Sat May 35 3013 16.5405 GMT+0900 (JST 
作成 元 の コン スト ラク タ : function Date() [ [native code] ! 

オプ ジェ クト の 値 : 」36946844S000 

ブー ル 聖 オプ ジェ クト : me 

作成 元 の コン スト ラク タ : junction Booleam() | [native code] | 

| オプ ジェ クト の 値 : ime 


配列 オブ ジェ クト : ホー ムペ ー ジ 辞典 .HTML タ グ 辞 典 . ス タイ ル シ ー ト 辞典 
作成 元 の コン スト ラク タ : function Aray() | [metive codel ! 
オブジェ クト の 値 : ホー ムペ ー ジ 辞典 .HTML タ グ 辞 典 . ス タイ ル シ ー ト 秋 典 








valueOf メ ソ ッ ド ーー ドー ドー 1 


< 5 PPmmrー で EE rp 


作成 元 の コン スト ラク 多 : fncton String() { [mative code] } 


作成 元 の コン スト ラク 多 : fanction Boolean() { [nattve code] } 


配列 オプ ジェ クト : ホ ー ム ペー ジ 辞 典 HTML タ グ 辞 典 . ス タイ ル シ ー ト 辞典 
作成 元 の コン スト ラク 多 : function Array() { [natve code] } 
オブ ジェ クト の 値 : ホ ー ム ペー ジ 辞 典 .HTML タ グ 辞 典 . ス タイ ル シ ー ト 辞典 
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Eaty 詳 議 詳 還 還 証 ぼ し "ドド 「…「…' ト …… ひ 
関数 を 作成 し た い 


文 = new Function(,,…,$,^) 





衣 ……Function オ ブ ジ ェクト を 格納 する 変数 





ぐる 引数 [省略 可 】 
4^…- 処 理 の 内 容 
オブ ジェ クト 





Function は 関数 を 扱う オブ ジェ クト で す 。 新しく Function オ ブ ジ ェクト を 作成 する に は 
new ス テー トメ ント (Dp.037) を 使用 し ます が 、 通 常 は 明示 的 に 作成 する こと は あり ませ ん 。 

動作 は 通常 の function| } に よる 関数 定義 と 同じ で す 。 文 で 指定 し た 変数 の 名 前 が 関数 名 に な 
り ま す 。 


77s9 = new Function ("alert(arguments[0] + arguments[1]) "): 
最初 の 引数 と 2 番目 の 引数 を 結合 し て 、 ダ イア ログ に 表示 する 関数 msg を 作成 し ます 。 
な お 、 明 示 的 に 関数 オブ ジェ クト を 作成 せ ず 、 
function msg() { 


alert(arguments[0] + arguments[1]): 
} 
と し て も 同様 の 効果 を 得 ら れ ま す 。 


77 ル Ca/c = new Function(⑦ 也 "return な 7): 
引数 [、 引 数 | を 加算 し た 結果 を 返す 関数 myCalc を 作成 し ます 。 

















, ブラ ウザ 対応 表 





1 ヨリ リ 1 Opera  iOS6 Android 


〇 O O 〇 O O O O O 


上 参照 2 ( 舞 伏 編 ) | 開 数 2 0 32 ass P039 


Chrome Safari 
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| FUNCTION.02 =。 2 還 還 還 還 EE 
を 
関数 呼び 出し の 情報 を 調べ た い 

















い 
arguments.length 呼び 出し 時 に 実際 に 与え られ た 引数 の 数 を 参照 関 | 
文 .length 関数 が 期待 する 、 関 数 定義 時 の 引数 の 数 を 参照 了 | 
文 。caller 呼び 出し 元 の 関数 オブ ジェ クト を 参照 本 | 
3 に 開 
娘 …Function オ ブ ジ ェクト ( 敵 数 名 ) 情 | 
ブロ パティ を | 
arguments は 関数 に 渡さ れ た 引数 を 格納 し た 配列 で す 。 そ の 関数 内 の ロー カル 変数 と し て ペ ベ | 

も Function オ ブ ジ ェクト の プロ パテ ィ と し て も 参照 で きま す が 、 後 者 は 非 推奨 で す 。 


length プ ロ パ ティ 
定義 上 の 引数 の 数 を 参照 し ます 。 実際 に 与え られ た 引数 の 数 は arguments.length で す 。 


caller プ ロ パ ティ 
この 関数 文 を 呼び 出し て いる 関数 (Function オ ブ ジ ェクト ) を 参照 し ます 。 ト ッ プ レベ ル で 
関数 太 が 呼び 出さ れ て いる と き は null を 返し ます 。 


/ = arguments.length 
関数 newFunc の 引数 の 数 を 変数 n に 格納 し ます (関数 newFunc 内 の 記述 )。 








ぁ ブラ ウサ 対応 表 IE1O IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
O 〇 O O 〇 O O O O 〇 O O 
| 参照 オブ ジェ クト の コン スト ラク タ の 値 を 参照 し た い ・・ P273 
忠明 ′ 間 数 内 か ら ほ か の 関数 を 呼び 出し た い …・・ P282 


【SAMPLE】 関 数 呼び 出し 情報 を 調べ る ・・・・・・ P285 
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。 還 aeEz 議 議 証 証明 …… ペ りす -!†〔†1…『]『|『〔† ぴ ぺ ペ 8 上 4RW ペ へ 
_ 関数 内 か ら ほ か の 関数 を 
ー、 畔 び 出 し た い 


太 .aDDIV( 人 4, arguments) 
| 文 .call(^, 多 ,..) 





衣 …… 呼 び 出す Function オ ブ ジ ェクト (関数 名 ) 
人 …… 呼 び 出 され た 関数 内 で this に 格納 され る オブ ジェ クト 





茹 皇 メソ ッ ド 





apply メ ソ ッ ド お よび call メ ソ ッ ド は 、 関 数 内 か ら ほ か の 関数 を 呼び 出し ます 。 apply と 
』 cal メソッド の 違い は 引数 だ け で 、 動 作 は 同じ で す 。 


apply メ ソ ッ ド 
第 1 引数 に 、 呼 び 出す 関数 内 で this と し て 表し た い オ ブ ジ ェクト を 指定 し ます 。 第 2 引数 に は 
arguments を 指定 し 、 ま と め て 引数 を 渡し ます 。 


| 
| call メ ソ ッ ド 
| 第 1 引数 に 、 呼 び 出す 関数 内 で this と し て 表し た い 呼 び 出し 側 の オブ ジェ クト を 指定 し ます 。 
| 第 2| 数 以降 に は 、 引 数 と し て 渡す 変数 を 個々 に 指定 し ます 。 
] 
| 


| cg/c.apply(this, arguments): 
| 関数 calc を 呼び 出し ます 。 こ の と き 、 こ れ を 実行 し て いる 関数 で 定義 され た 引数 を すべ て 関数 











| calc に 渡し ます 。 
ーーー 当 
| cg/c.call(this, a, b): 
| 関数 calc を 呼び 出し ます 。 こ の と き 、 こ れ を 実行 し て いる 関数 で 定義 され た 数 a.b を 関数 calc に 
| 渡し ます 。 
| 
因 ぁ ブラ ウザ 対応 表 IE10 1 3:) Fx Chrome Safari Opera iOS6 Android 


〇 O O O O O O O O 


| 参照 関数 呼び 出し の 情報 を 調べ た い P281 
」 【SAMPLE】 関数 か ら ほ か の 関数 を 呼び 出す ・・P283 
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FUNCTION.SAMPLE-01 


関数 内 か ら ほ か の 関数 を 
呼び 出す 






[半径 ] の 値 が 変更 され る と calc 関 数 が 呼び 出さ れ ま す 。 関 数 内 で は 、Circle オ ブ ジ ェクト を 
作成 し 、 そ の circumference 属 性 を 円 周 、area 属 性 を 面積 と し て 画面 に 表示 させ て いま す 。 

Circle 関 数 内 で は 、 生 成 し た Circle オ ブ ジ ェクト の 属性 を setPI 関 数 を 使っ て 初期 化し て い 
ます 。setPI 関 数 は 、this 変 数 の 指定 され た 属性 に 、 引数 value 円 周 率 の 結果 を 格納 する 関数 
で す 。 通常 の 関数 呼び 出し で は この this は window オ ブ ジ ェクト で す が 、 apply メ ソ ッ ド を 利 
用 する と 、 第 1 引数 で この this の 中 身 を 指定 する こと が で きま す 。 





function ca/c) { // 半径 を 入力 する と 呼び は 5 関数 
Var /g7/s = document. HP 7g の 7/s") .value: 
Var c77c/e = new Circle(/gg7s): // CrCle オ フジ ェクト を 作成 


document.qetElementById("c カ cg77").value = 7/c/e.circumference: 
document.qetElementById( "area").value = c7/c/e.area: 


function 77c/e(/g7s) { rcle オ ブ ジ ェクト の コン ス ! 
se が 7.apply(this, ["circumference", Ja の gy 4 1 し 
se7P7.apply(this, ["area", radius * /g97/]): 
) 
function se7P7(p/op, Value) { / 由 変 数 の prop 属 性 に 円 周二 Value を 析 科 する 
の this は 通常 の 呼び 出し 方 を し た は A ェ ク 
spply で 呼び 出す こと で this が apply の 第 


this[prop] = value * Math.PI: 



























































1 
<bodV> 
<b> 円 の 半径 を 入力 する と 、 円 周 と 面積 を 算出 し ます </b> 
<form action=""> 
<D> 
半径 : <1nput type="text" id="7g の 7/s" size="30" onchange="cg/c り " /> 
</D> 
<D> 
ロ 周 : <input type="text" id="c カ cg77" size="30" onchange="ca/c" 
/><br/> 
面積 : <1nput type="text" id="a/eg" size="30" onchange="cg/c り " /> 
</D> 
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難 瑞 は 品 O/ は 選 難 濁 








ーー 


関 
24 





</form> 
</body> 








Internet Exp 


デ 
と 唱 き http://wwwr.shoeisha.co の ・ 足 ひ 


円 の 半径 を 入力 する と 、 円 周 と 面積 を 算出 し ます 
半径 :7 | 


円 周 :|43.982297150257104 
面積 :|153.93804002589985 
































半径 を 入力 し 、 テ キス ト 入 力 フィ ー ル ド か ら フ ォ ー カ ス を 離す と 、 円 周 と 面積 が 計算 され ます 


Column ユー ザー 定義 オブ ジェ クト 


任意 の 関数 を new を 使っ て 呼び 出す と 、 そ の 関数 が 生成 し た オブ ジェ クト が 返さ れ ま す (return 
の 値 は 無視 され ます )。 こ の 時 、 生 成 し た 関数 を コン スト ラク タ と 呼び F、 コ ンス トラ クタ を 独自 に 
定義 する こと で 、 独 自 の オブ ジェ クト を 生成 する こと も で きま す 。 


Student オ ブ ジ ェクト = new Student( 任 意 の 数 の 引数 ): 


new で 呼び 出さ れる と 、 関 数 内 の this 変 数 に は 、 生 成 さ れ た オブ ジェ クト が 格納 され ます 
(p.037)。 こ の this を 利用 する こと で 、 オ ブ ジ ェクト の 初期 化 を 行い ます 。 


function Student (3) { 
this.name = ai 
1 


上 記 で は Student オ ブ ジ ェクト を 生成 し て name プ ロ パ ティ を 定義 し て いま す 。 メ ソ ッ ド に つい 
て は 、 関 数 の 外 で 、 以 下 の よ うな 書式 で 定義 し ます 。 


Student.prototype.hello = function( 任 意 の 引数 )|( メ ソ ッ ド の 処理 ]: 


この 例 で は Student オ ブ ジ ェクト に hello メ ソ ッ ド を 定義 し て いま す 。 メ ソ ッ ド と し て 呼び 出さ 
れ た 場合 、 そ の 関数 内 の this は 、 そ の メソ ッ ド が 所 属し て いる オブ ジェ クト に な り ま す 。 





| appPy メ ソ ッ ド ーー ドー ドー ーーー ドーーーー P282 
1 
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FUNCTION.SAMPLE-02 


関数 呼び 出し の 情報 を 
調べ る 


関数 の 情報 を 表示 する サン プル で す 。 ペ ー ジ が 読み 込ま れる と loadPage 関 数 を 呼び 出し 、 
配列 オブ ジェ クト の 作成 と argCheck 関 数 を 呼び 出し を 行い ます 。argCheck 関 数 で は 関数 の 
情報 を 取得 し て 表示 し て いま す 。 





EYEkdlgi 


function /oaPg9e(/ { // 配 列 の 作成 と argCheck 関 数 を 呼び 出す 関数 
argCheck.call(this "1 の "2 の "3 "4 の "5 "6 
} 
function argC7ec ん (a, ムカ c の { // 関 数 の 呼び 出し 情報 を 参照 し て 表示 する 関数 
document.write( "<b>argCheck 関 数 の 情報 </b><hr />『): 
document.write("<b> 実 際 の 引数 の 数 (arguments) : </b>", arguments.lenqgth, 
"cbr />"): 
document.write("<b> 本 来 の 引数 の 数 (length) : </b>", argCheck.length, "<br 
| 
document.write("<b> 呼 び 出 し 元 :</b>", argCheck.caller "()<br />"): 


} 





<body onload="/gagPgge り "> 
</body> 





Internet Exp 








を 計 削 | 叶 http://www.shoeisha.co の ・ 邑 〇 
argCheck 関 数 の 情報 


実際 の 約 の 数 (argnments) :6 
本 来 の 引 数 の 数 ength) :4 

呼び 出し 元 : fnnction loadPage() { / 趣 P 下 の 作成 と argCheck 関 数 を 
呼び 出す 関数 argCheck.call(this. "17. "727."737 "747 TS" 76 の )0 












| length プロ パテ ィ -・ P281 
IE 用 : 参 て caller プロ パテ ィ ・・ P281 
constructor プロ パテ イィ ーー P281 
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の > 呈 趣 意 う で EC 還 甘 瑞 へ CHFEC 還 Q 持 更 ③ さ 
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EIClml 











正規 表現 を 使い た い / 


太 = new RegExp ( 多 ,^ ) 中 更 オ フジ ェクト を 作成 


天 ……RegExp オ ブ ジ ェクト を 格納 する 変数 | 
$…… パ ター ン ( 下 規 表現 を 文字 列 で 表し た も の ) 
ム …… フ ラグ [ 和 省略 可 】 


オブ ジェ クト 


正規 表現 (Regular Expression) は 、 一 定 の ルー ル に 従っ て 文字 列 の 規則 的 な パタ ー ン を 表 
現し た も の で 、 検 索 や 置換 の 際 に 使用 し ます 。 

正規 表現 を 使用 する に は 、RegExp オ ブ ジ ェクト を 作成 し ます 。 引数 の は 正規 表現 の 文字 
列 、 人 4 は フラ グ で す 。 フ ラグ に は g と i が あり 、g を 指定 し た 場合 に は 一 致 が すべ て 検索 され ま 
す 。 | を 指定 し た 場合 は 大 文字 と 小文字 の 区 別 を 無視 し ます 。 

検索 は 、RegExp オ ブ ジ ェクト の exec メ ソ ッ ド (p.291) で 実行 し ます 。 結果 は オブ ジェ クト 
の 属性 $1-$9 に 格納 され ます 。 ま た 、String オ ブ ジ ェクト の match、search、replace メ ソ 
ッ ド の 引数 に RegExp オ ブ ジ ェクト を 指定 し て 、 検 索 や 置換 を 行う こと も で きま す (p.293)。 

な お 、 文 new RegExp( 多 4) の 書式 は 娘 =/ 多 /A ふ と し て も 同じ 結果 に な り ま す 。 














上 = 

ICOIulimn パタ ー ン の 設定 方 法 
RegExp オ ブ ジ ェクト の 作成 時 や compile メ ソ ッ ド で 設定 する パタ ー ン は 、 さ ま ざ ま な 種類 が あ 

り ま す 。 ま た 、 以 下 の 2 行 は 同じ 意味 に な り ま す 。 

re = new RegExp("abc", "や"): // new を 使っ た ReqExp オ ブ ジ ェクト の 初期 化 

re = /abc/: // 「/」 を 使っ た ReqExp オ ブ ジ ェクト の 初期 化 









パタ ー ン の 使用 例 を いく つか 紹介 し ます 。 





改行 文字 以外 の 任意 の 文字 と 一 致 
sc と それ に 続く 改行 文字 以外 の 任意 の 2 文字 を 検索 (大 文字 小文字 は 区 別 な し ) 。 
result = "JavaScript 辞 典 ".match(/sc../i): // 一 致 結果 は 「Scri」 
角 カ ッ コ 内 の いずれ か の 文字 と 一 致 
X、s、d の うち の どれ か 1 文字 と それ に c が 続く 部 分 を 検索 (大 文字 小文字 は 区 別 な し )。 
result = JavaScript 辞典 ".match(/[xsd]c/): // 一 致 結果 は 「Sc」 
どちら か の 文字 と 一 致 
java また は VB と それ に 続く script の 部 分 を 検索 (大 文字 小文字 の 区 別 は な し で 一 致す る すべ て の 
部 分 を 検索 )。 変 数 result に は javaScript が 格納 され ます 。 
result = "JavaScrpt 辞 典 ".match(/(JavalVB)scrpt/qi): 
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1 意味 1 : 例 で 検出 され る 値 





せ ど 溢 人 R 其 共 田 


ー 


! cake な ど (lake、, 
1 : make 以 外 ) ! 


2AS3 


4 人 5 人 な ど (1! 
2 人 、3 人 以外 ) , 





!Ww : 音 画 に 使用 され る 任意 の 文字 (アル ファ ベッ ト の 大 
! , 文字 と 小文字 、7 2 スコ ア お よび 数 字 ) と 一 致 





1 に 指定 し た 8 進数 の エス ケー ブ 値 と 一 致 。8 進 数 の H 1 
!\\ ' 半 は 1 桁 、2 桁 、 ま た は 3 桁 で 指定 し ます 。256 を 0 1 
! トー 初め の 2 桁 で 仁 ! 





! Yu ! 衣 に 指定 し た 16 進 数 の エス ケー ブ 値 と 一 到 16 直 
! の エス ケー プ 値 は 、2 桁 で 指定 





と ブラ ウサ 対応 表 IE1O0 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
O O O ) O 〇 O O O 〇 O 


| 参照 】 (基礎 編 ) オブ ジェ クト を 扱う ・…・・…・・ P037 
1 【SAMPLE】 テキ スト を 正規 表現 検索 する ・・・P295 
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現 








正規 表現 の オプ ショ ン を 調べ た い 


文 .dlobal 完全 一 到 検 索 か どう か 参照 
文 .ignOreCase 大 文字 と 小文字 の 区 別 を 参照 
RegExD.multil1G 。 必 生 コ ー ド を 無 提 す る か どう か を 参照 設定 





プロ パテ ィ 





RegExp オ ブ ジ ェクト の 現在 の 設定 を 参照 し ます 。 
global、ignoreCase プ ロ パ ティ 

RegExp オ ブ ジ ェクト 作成 時 に 指定 する フラ グ (g ま た は )) の 設定 状態 を 返し ます 。 global プ 
ロ パ ティ の 値 が true の 場合 (フラ グ が g の と き )、 最 初 の 一 致 だ な け で な くす べ て の 一 致 を 検索 し 、 
結果 を 配列 に 格納 し ます 。ignoreCases プ ロ パ ティ の 値 が true の 場合 (フラ グ が i の と き ) は 、 検 
索 時 に 大 文字 と 小文字 を 区 別 し な く な り ま す 。 そ れ ぞ れ 設 定 さ れ て いな い 場 合 は false を 返し 
ます 。 こ れ ら の プロ パテ ィ で は 、 設定 の 変更 は で きま せん 。 設定 後に フラ グ を 変更 し た い 場 合 
は 、compile メ ソ ッ ド (p.291) を 使用 し て 新しい 設定 を 適用 し て くだ さい 。 
multiline プ ロバ パティ 

検索 時 に 改行 コー ド を 無視 する か どう か を 参照 / 設 定 す る プロ パテ ィ で す 。 値 は true (改行 
を 無視 し な い ) ま た は false( 改 行 を 無視 する ) に な り ま す 。multiine プ ロ パ ティ は $* で 置き 換 
える こと も 可能 で す 。 


alert(matchStrglobaU): 
RegExp オブ ジェ クト matchStr が 完全 一 致 検索 か どう か を 表示 し ます 。 


alert(matchStr.ignoreCase): 

RegExp オブ ジェ クト matchStr が 大 文字 と 小文字 を 区 別して いる か どう か を 表示 し ます 。 
RegExp.multiline = false: 

改行 コー ド を 無視 し 複数 行 に 対し て 検索 する よう に 指定 し ます 。 
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最後 に 一 致す る 文字 列 を 参照 し た い 


RegExD.IastMatCh 。 軟 に 一 到 し た 字 別 を 参照 
RegExD.IastPare 時 次 に 一 致し た グル ー プ の 字 列 を 参 





プロ パテ ィ 
一 致し た 文字 列 を 参照 する プロ パテ イィ です 。 


lastMatch プ ロ パ ティ 
最後 に 一 致し た 文字 列 を 参照 し ます 。 lastMatch は $& で 置き 換え る こと が で きま す 。 つ ま 
り 、RegExp.lastMatch と RegExp.$& は 同じ 結果 を 返し ます 。 


lastParen プ ロ パ ティ 
最後 に マッ チ し た 文字 の うち 、 検 索 パタ ー ン の 最後 の グル ー プ (() で くく られ た 部 分 ) に 相当 
する 文字 列 を 参照 し ます 。 IastParen は $+ で 置き 換え る こと が で きま す 。 


alert(RegExp.lastMatch): 
最後 に 一 致し た 文字 列 を ダイ アロ グ に 表示 し ます 。 


document.write(RegExp.lastParen): 
最後 に 一 致し た グル ー プ の 文字 列 を 書き 出し ます 。 
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3c19」 いる 4 だ)【@) 07! 


ー 致 する 文字 列 の 左右 の 文字 列 を 
参照 し た い 


RegExp.leftContext 最後 に 一 致し た 文字 列 より 前 の 文字 列 を 参照 
RegExp.rightContext 最後 に 一 致し た 文字 列 より 後ろ の 文字 列 を 参照 








プロ パテ ィ 


ー 致 する 文字 列 の 左右 の 文字 列 を 参照 する プロ パテ ィ で す 。 


leftContext プ ロ パ ティ 
最後 に 一 致し た 文字 列 よ り 前 の 文字 列 を 参照 し ます 。leftContext は $ で 置き 換え る こと が 
で きま す 。 


rightContext プ ロ パ ティ 
最後 に 一 致し た 文字 列 よ り 後ろ の 文字 列 を 参照 し ます 。 rightContext は $ で 置き 換え る こと 
が で きま す 。 


7g7c75 = RegExp.leftContext: 


最後 に 一 致し た 文字 列 より 前 の 文字 列 を 変数 matchStr に 代入 し ます 。 





document.write(RegExp.rightContext): 
最後 に 一 致し た 文字 列 よ り 後ろ の 文字 列 を 書き 出し ます 。 
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| REGULAR EXPRESSION.05 2 還 還 還 還 還 還 EE 
正規 表現 の 文字 列 を 変更 し た い 


福 = 文 .COmpile(, ^ ) 。 パターン 史 設定 また は 変更 


ReqgExp.input 検索 する 文久 を 参 照 / 設 定 

文 。S0UTCe パタ ー ン 文字 列 を 参照 

ヤマ = 文 .test( 人 @ 一 致す る 文字 列 が 含ま れ て いる か どう か を 調べ る 
田 = 災 .eXeC(@) 検索 を 実行 

文 。lastIndex 検索 の 開始 位置 を 参照 設定 

次 ……RedExp オ ブ ジ ェクト マ ……true ま た は false 
……RedExp オ ブ ジェ クト @… 検 索 の 対象 と な る 文字 列 

る … バ パターン 還 … 結 果 が 格納 され る 変数 

^…… フ ラク [省略 可 】 





メソ ッ ド (compile、input、test、exec) 
プロ パテ ィ (source、lastIndex) 





compile、input メ ソ ッ ド 

compile メ ソ ッ ド で は 、 検 索 に 使用 する パタ ー ン 文字 列 を 設定 また は 変更 し ます 。 検索 対 
象 の 文字 列 は Input メソ ッ ド で 設定 で きま す 。 こ れ ら の メソ ッ ド を 使用 する と 、 ユ ー ザ ー が フ 
ォ ー ム に 入力 し た パタ ー ン や 検索 対象 文字 列 な ど を 使っ て 検索 で きま す 。 


source プ ロ パ ティ 
new ス テー トメ ント や compile メ ソ ッ ド に よっ て 設定 され た パタ ー ン 文字 列 を 参照 で きま 
す 。 


test メ ソ ッ ド 
全 と 一 致す る 文字 列 が 含ま れ て いる か どう か の み を 調べ ます 。 結果 と し て 、 一 致す る 文字 列 
が あれ ば true、 な けれ ば false を 返し ます 。 


exec メ ソ ッ ド 

検索 を 実行 する する メソ ッ ド で す (match メ ソ ッ ド で も 可能 。p.293)。 パ ター ン 文 字 列 に 一 
致す る 文字 列 が 見 つか っ た 場合 は 結果 の 配列 を 返し 、 見 つか ら な か っ た 場合 は null を 返し ます 。 
検索 の 対象 と な る 文字 列 を 省略 し た 場合 、RegExp.input で 設定 され た 文字 列 が 検索 され ます 。 
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lastIndex プ ロ パ ティ 

















中 ヨ 
検査 の 開始 位置 を 指定 し ます 。 た と えば |astIndex プ ロ パ ティ を 5 に 設定 し た 場合 、 そ れ よ 
現 り 前 の 部 分 (1 一 5 文字 目 ) に 一 致す る 文字 列 が あっ て も 検出 され ませ ん 。 
0 6 " 
77gfc75 が な = /e.compile("julia"): 
RegExp オ ブ ジ ェクト re の パタ ー ン 文字 列 を julia に 変更 し た RegExp オ ブ ジ ェクト matchStr を 作 
り ま す 。 
ーー RegExp.input="ism": 
検索 文字 列 を ism に 設定 し ます 。 
alert(7e.source): 
RegExp オ ブ ジ ェクト re の パタ ー ン 文字 列 を ダイ アロ グ に 表示 し ます 。 
7es7es//7 =/e.test(s か が ): 
RegExp オ ブ ジ ェクト re と 文字 列 str の パタ ー ン マッ チ を 行い 、 結 果 を 変数 testResult に 代入 し ま 
す 。 
@xeces//7 = /e.exec(a7): 
RegExp オ ブ ジ ェクト re と 文字 列 str の パタ ー ン マッ チ を 行い 、 結 果 を 変数 execResult に 代入 し ま 
す 。 
| 7e.lastIndex = 4: 
RegExp オ ブ ジ ェクト re を 5 番目 の 文字 か ら 検索 する よう に 設定 し ます 。 
II 
ーー むす 
1 
| 
ーー 明 > ブラ ウザ 対応 表 IE10 3 3: Fx Chrome Safari Opera iOS6 Android 
| 〇 〇 〇 〇 O 〇 O 〇 O O 〇 O 
| 正規 表現 で 文字 列 を 検索 置換 し た い ・…・・・・ P293 
上 参照 】 正規 表現 の オプ ショ ン を 調べ た い ・・・- P288 
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ドコ 1 いう 4 り いい 玉 1【@ NE0[<) | 由 
記 
正規 表現 で 文字 列 を 検索 / 置 換 し た い の 
宝 
@ = 文 .match( ぐ ) 検索 し 、 一 致し た 文字 列 を 返す 変 | 
園 = 文 .search() 検索 し 、 一 致し た 位置 を 返す わし 
マ = 婦 .replace( 移 , ^) 還る 暫 
@…ー 致 し た 文字 列 指 
……String オ ブ ジェ クト (文字 列 ) 家 | 
正規 表現 文字 列 現 
画 … 一 致し た 位置 で 
マ 置換 され た 文字 列 文 
^…… 男 換 文字 列 記 
列 | 
メソ ッ ド | [ 
| 索 
正 規 表現 を 使用 し て 文字 列 の 検索 や 置換 を 行い ます 。 文 に は 文字 列 また は 文字 列 が 格納 され | 克 
た 変数 を 指定 し ます 。 正規 表現 文字 列 に は 、RegExp オ ブ ジ ェクト の メソ ッ ド や プロ パテ ィ | 換 
で 設定 し た パタ ー ン 文字 列 を 指定 し ます 。 | だ 
い 


match メ ソ ッ ド 
文字 列 の 検索 を 行い ます 。 一 致し た 場合 は その 文字 列 を 返し 、 一 致す る 文字 列 が な か っ た 場 
合 は null を 返し ます 。 


search メ ソ ッ ド 
文字 列 の 検索 を 行い ます 。 一 致し た 場合 、 一 致し た 文字 列 の 先頭 か ら の 位置 を 返し ます 。 先 
頭 文 字 の 位置 は 0 で す 。 一 致す る 文字 列 が な か っ た 場合 は -1 を 返し ます 。 | 


replace メ ソ ッ ド 
文字 列 の 置換 を 行い ます 。 一 致し た 場合 は その 文字 を 指定 し た 文字 に 置き 換え 、 一 致す る 文 
字 列 が な い 場合 は null を 返し ます 。 
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s な .match(/xp/1): 


正 
規 
表 
現 文字 列 str か ら xp の 文字 を 、 大 文字 小文字 を 無視 し て 検索 し ます 。 


娘 ees/# = 5 な 7.search(/xp/1): 
文字 列 str か ら xp の 文字 を 大 文字 小文字 を 無視 し て 検索 し 、 結 果 の 位置 を 変数 theResult に 代入 し 


ます 。 


妨 eAes/7 = 5 な.replace("Sun.", "Sat."): 
文字 列 str の Sun. を Sat. に 置き 換え 、 結 果 を 変数 theResult に 代入 し ます 。 








ぁ プラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O 〇 (だ) O 〇 O ⑯) 〇 (人 
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ロ 一 致す る 文字 列 の 左右 の 文字 列 を 参照 し た い ・・ P290 
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REGULAR EXPRESSION.SAMPLE-01 


テキ スト を 
正規 表現 検索 する 


テキ スト 欄 に 含ま れる テキ スト を 正規 表現 検索 する サン ブル で す 。「[ 検 索 開始 ] ボ タン が クリ 
ッ ク さ れる と searcher 関 数 を 呼び 出し ます 。 [検索 する 文字 列 ] 欄 の 内 容 を 引数 と し て 正規 表現 
オブ ジェ クト を 作成 し 、match メ ソ ッ ド を 使用 し て 検索 を 行っ て いま す 。 正規 表現 オブ ジェ 
クト の フラ グ は ラジ オ ボ タ ン で の 切り 替え が 可能 に な っ て いま す 。 検索 が 終了 し た ら 、 ダ イア 
ログ で フラ グ の 状態 を 表示 し 、 検 索 結 果 は 画面 下段 の 「 検 索 結 果 」 テ キス ト エ リア に 表示 し ます 。 


JavaScript = = 
// テ キス ト を 正規 表現 検索 する 関数 
function sea/c7e7 り { 
Var gg = リリ: 
var 7o77/e77 = document.qetElementById("7p/777"): 
守 (6/777e77.9/o の ag/[1].checked) 
7 が g9 = "gd": //[ す べ て ] が オン な ら フ ラグ を g 
if(/77E/e77.7970g/e [1].checked){ 
9 += 1"://[ な し ] が オン な ら フ ラグ に | を 加え る 


Var s な = 7o/77/e/7.7ex77.Value: 

var 7ex7Mg//e = 70/77E/e/7.7ex74 7.value: 

var 77afc75 か な = new RegExp(s か , 7g9):// 正 規 表現 オフ ジェ クト 作成 

var seg7c/ カ es/7 = 7ex7g//e.match (77afc75 が ): 

// 正 規 表現 で の 検索 結果 を 変数 に 代入 

7/77E/e77.fex742.value = sea/C7es// 

alert("global ブ プロ パテ ィ は "+ afc75S な 7.global + "\nignoreCases プ ロ パ ティ は " + 
afc75 か 7.iqnoreCase): 


} 
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<body> 
<form action="" id="form1"> 
<D> 








検索 する 文字 列 (正規 表現 使用 可能 ) : 
<input type="text" name="7exf7" size="30" /> 
<input type="button" name=" の 7" Value=" 検 索 開始 " oncick="searc7er り " 
/><br/> 
検索 対象 : 
<input type="radio" name="g/o の ga/" checked="checked" />1 つ 2 目 
<input type="radio" name="9/o が a/"/> す べ て <br/> 
大 文字 、 小 文字 の 区 別 : 
<input type="radio" name="77o/7e" checked="checked" /> あ り 
<input type="radio" name="7 婦 7 の 7e"/> な し <br /> 
</P> 
<hr /> 
<D> 
検索 対象 と な る 文字 列 : <Dr /> 
<textarea name="zex47" cols="80" rows="10"> 
金井 混 君 は 哲学 が 職業 で ある 。 
哲学 者 と いう 概 訪 に は 、 何 か 書物 を 書い て いる と いう こと が 伴う 。 
(… 中 略 …) 
真面目 な 講義 の 中 で 、 そ の 頃 青年 の 読ん で いる 小説 な ん ぞ を 引い て 説明 する の で 、 学生 が びっく 
りす る こと が ある 。 
</textarea> 
</P> 
<hr /> 
<D> 
検索 結果 : <Dr/> 
<textarea name="7ex742" cols="80" rows="3"></textarea> 
</P> 
</form> 
</body> 
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B htp:/w で | 人 正二 い EN 


検索 する 文字 列 OF 規 表現 使用 可能 ) | 陣 ん 政 学 | 欄 締 昌 6 | 
検索 対象 : 〇 1 つ 目 @ す べ て 
大 文字 、 小文字 の 区 別 : @ あ り て 











検索 計 旬 と な る (編集 可能 ) : 
で ある 。 


HO 2 


NH 





は する 3 

を le 
い 六 線 を に 

い 物 、 何 の 関 | 

な 事 が 多い 。 scd 


暗記 時 まま NT 











検索 結果 : 





は 哲学 , は 哲学 , は 哲学 , の 哲学 , も 哲学 











検索 する 文字 列 ( パ ター ン ) に 「[ あ - ん ] 哲 学 」 を 指定 する と 、 ひ ら が な 哲学 の 3 文字 が 検索 され ます 


き | http://www shoelsha.co の ・ 8 C | 婦 正夫 現 を 使い たい x 加 証 


検索 する 文字 列 ( 下 規 表現 合用 可能 ): | 検索 906 | 
検索 対象 : 〇 1 つ 目 @ す べ て 

















大 文字 、 小文字 の 区 別 : @ あ り 〇 ね し ト 


本 入ら る ( 軸 可能 : 





生計 Sh 員 条 









いか 設 ん で を SI いて 






globa プ げ ロ (ティ は true D 
て し る か ら 講 人 ignoreCase プ ロ ( テ ゃ ] 
NH mil 
f 計 で も 消え な 
0 還 | 








検索 結果 : 
は 折 学 。 哲学 , は 哲学 , 道 折 学 , 肝 習 学 , は 哲学 。 世 哲学 , の 哲学 , も 哲学 











検索 する 文字 列 (パタ ー ン ) に 「. 折 学 」 を 指定 する と 、 哲 学 で 終わ る 4 文字 が 検索 され ます 


| RegExp オブ ジェ クト 
| 参照 】 gobal プロ リティ 2 


match メソ ッ ド ーー ドド ーー ドー ドー ドー ) 
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由 REGULAR EXPRESSION.SAMPLE-02 | 
表 | 
現 


正規 表現 で 文字 列 を 
検索 / 置 換 する 


入力 と 指定 し た 正規 表現 と の 一 致 を 調べ る サン プル で す 。 郵便 番号 、 電話 番号 、 メ ー ル アド 
レス の それ ぞ れ の 値 に つい て 、match メ ソ ッ ド を 使っ て チェ ッ ク し ます 。 [郵便 番号 」 は 「@@ 
ゴゴ 人 @-@@@@」、「 電 話 番号 」 は 10 桁 の 数 字 、「 メール アド レス 」 は 「 〇 OO@OO 〇 .@@.@@」、「 〇 
OO@OOO. 傘 @@」、 ま た は 「 〇 〇 〇 @ 〇 〇 〇 .@@」 の 形式 と の 一 致 を チェ ッ ク し て いま す 。 
※ 氏 の 部 分 は 文字 数 は 固定 、 〇 の 部 分 は 1 文字 以上 の 数 で す 。 





function c/7cg777) { //「 確 認 ) ボ タン を クリ ッ ク し た と き の 処 理 の 関数 
Switch (7) { // 渡さ れ た id で % ) 野 
case "post": check(77, "郵便 番号 ", 【/^\d13}[-]\d{4}$/, null): 
break: 
case "tel": check(77, "電話 番号 ", [/^\d{10}$/, null] ): 
break: 
case "email": check(77, "メー ル ア ド レス ", [ 
/^\w+([-]?\w+)*@\w+([-]?Yw+) *(\.\w{2.3})t119/, 
/“Ww+([-]1?Ww+)*@Yw+([-]?Yw+)*(\.\wf21){1}(\.\w{2))(115/]): 
break: 





] } 

} 

function c7ec ん (77, 7a/7e, 7/e) { // 実際 の チェ ッ ク を 行う 関数 
Var e/ = document.getElementById(id): 
if (eLvalue.match(re[0]) || e/.value.match(/e[1])) { 

| alert(7a77e + "の 形式 に な っ て いま す 。 UM 

} else { 
alert(7a77e + "を 正確 に 入力 し て 下さ い 。 3 
@/.focus(): 
e/.select(): 





] } 
} 
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|HTVL_ 5=5 5 還 還 還 還 EE 


<body> 
<form action=""> 
<D> 
郵便 番号 :<1nput type="text" id="post"/> 
<input type="button" value=" 確 認 "onclick="c/7c ん gos77" /> 
</D> 
<D> 
電話 番号 () イ な し ):<1nput type="text" id="tel"/> 
<input type="button" value=" 確 認 "onclick="c/7cg77(7e/ り " /> 
</P> 
<D> 
メー ル ア ド レス :<input type="text" id="email"/> 
<input type="button" value=" 確 認 " onclick="c/7c ん g77('e77g7 り 7" /> 
</D> 
</form> | 
</body> 


壮 溢 民 党 刊 誰 へ 滞 庫 洋 田 


PT 

















assap・ ac gsurwsw。 ・ 較 





郵便 番号 ] 160-0005 



















電話 番号 ハイ ル な し ): 





作 郵便 番号 の 形式 に な っ て いま す 。 





メー ル ア ド レス 】 














L_w | 





入力 し た 値 が 指定 され た 正規 表現 と 一 致し た 場合 
ー 本 守 


<) 師 http:/wwwrshoeisha.co D - 紀 C | 和 活 を し た 表現 か どう か 胃 .。 x 上 
郵便 番号 ] ] 
電話 番号 0 イア ね し | 

















余 メー ル ア ドレ ス を 正確 に 入力 し て 下さ い 。 





ズー ル ア ド レス :taro@shoeisha 





























一 致し な か っ た 場合 


用: 参 atGI2KONI < こ oo GCCNZNSZio2 ッ P293 
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@ 
M 





IDOM01 = …  。 5 還 還 還 還 還 還 還 還 
オブ ジェ クト の 情報 を 取得 し た い 


@ = document.etElementById() iC 
@ = document.qetElementsByTagName($) gcme 
@ = document.getElementsByName (4 ) emem 





@…… 取 得 され た 要素 


4……name 属 性 の 値 





茹 技 還 メソ ッ ド 


DOM( Document Object Model ) は スク リプ ト や プロ グラ ム 言 語 か ら HTML / 
XHTML 文 書 や XML 文書 に アク セス し て 操作 する た め の 規 格 で 、W'3C に よっ て 標準 化 さ れ て 
いま す 。DOM を 利用 する と 、HTML / XHTML の 要素 を すべ て javaScript の オブ ジェ クト と 
し て 操作 で きま す 。 これ ら の オブ ジェ クト は ドキ ュ メ ント に お いて ツリ ー 構 造 を 構成 し て お り 、 
「 ノ ー ド 」 と 呼ば れ ま す ( 要 素 ノ ー ド )。 ま た 、DOM で は HTML / XHTML の 要素 だ け で な く 属 
性 や 要素 内 容 の テキ スト な ども ノー ド と し て 扱わ れ ま す ( 属 性 ノー ド 、 テ キス トノ ー ド )。 

]avaScript か ら 要 素 を 操作 する た め に は 要素 ノー ド を オブ ジェ クト と し て 取り 出す 必要 が あ 
り ま す 。 そ の た め に 次 の よう な メソ ッ ド が あり ます 。 


getElementByld メ ソ ッ ド 
指定 し た id(id 属 性 の 値 ) を 持つ 要素 ノー ド を 取得 し ます 。 指定 し た id を 持つ 要素 が 見 つか ら 
な い 場 合 は null を 返し ます 。 


getElementsByTagName メ ソ ッ ド 

指定 し た 要素 名 の 要素 を すべ て 取り 出し 、 配列 と し て 返し ます 。 こ の メソ ッ ド は 要素 オブ ジ 
ェクト の メソ ッ ド と し て 利用 で き 、 そ の 場合 に は 要素 の 子孫 要素 の うち で 、 指定 し た 要素 名 の 
ノー ドリ スト を 返し ます 。 


getElementsByName メ ソ ッ ド 
指定 し た 名 前 (name 属 性 の 値 ) を 持つ 要素 を すべ て 取り 出し 、 配 列 と し て 返し ます 。 


HTML5 で は CSS セ レク タ 形 式 で の 要素 ノー ド の 取得 も 可能 と な り ま し た 。 「CSS セ レク タ 形 
式 で 要素 を 取得 し た い 」(p.412) を 参照 くだ さい 。 
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7y0 の / = document.getElementById("/eage/"): 
id 名 が header の 要素 ノー ド を 取得 し 、 変 数 myObj に 代入 し ます 。 


775 な = document.getElementsByTagName( "7").length: 
ドキ ュ メ ント に 含ま れる すべ て の 要素 の 数 を 取得 し て 、 変 数 myLists に 代入 し ます 。 


7a/7e0 が 7 = document.getElementsByName("/7e").length: 
ドキ ュ メ ント に 含ま れる 、 name 属 性 の 値 が like の 要素 の 数 を 取得 し て 、 変数 nameObj に 代入 し 
ます 。 








> ブラ ウザ 対応 表 IE10 IE9 1 Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 O O 〇 O O 〇 O 





と 証 て 敵対 加 通 テ HI 叶 








委 【SAMPLE】 オブジェ クト の 情報 を 取得 する ・・P320 
参照 
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IDOW02 == 5S5 …。。 5 還 還 還 E 
ノー ド を 参照 し た い | 


太 .ChildNodes[ 参 照 番号 ] 走 の テ ノ ー ド を | 


文 。firstChild 最初 の 子 ノー ド を 参照 | 
文 .lastChild 最後 の チノ ー ド を 参照 | 
文 .DarentNode 親 ノ ー ド を 参照 

文 .DreviousSibiling 前 の ノー ド を 参 

文 .nextSibiling 次 の ノー ド を 参 

⑯ = 文 .hasChildNodes( ) チノー ド の を 人 

男 = .item() 参照 番号 の ノー ド を 取得 





廊 …… ノ ー ド オブ ジェ クト 
@……true( 子 ノー ド が ある ) /false( な い ) 
田 … 取 得 さ れ た ノー ド 





プロ パテ ィ (childNodes、fi rstChild、lastChild、parentNode、previousSibiling、nextSibiling) 
メソ ッ ド (hasChildNodes、item) 





ノー ド を 親子 関係 や 兄弟 関係 (前 後 関係 ) な ど で 参 照 す る プロ パテ ィ あ る い は メソ ッ ド で す 。 
childNodes プ ロ パ ティ 

ChildNodes は ある ノー ド の すべ て の 子 ノー ド の 配列 で す 。 特定 の 子 ノー ド を 参照 する に は 、 
childNodes[ 参 照 番 号 ] と いう 形式 で 指定 し ます 。 


firstChild プ ロ パ ティ 
ある オブ ジェ クト の 最初 の 子 ノー ド を 参照 し ます 。 


lastChild プ ロ パ ティ 
ある オブ ジェ クト の 最後 の 子 ノ ー ド を 参照 し ます 。 


ParentNode プ ロ パ ティ 
ある 子 ノ ー ド か ら 見 た 親 ノ ー ド を 参照 し ます 。 


previousSibiling プ ロ パ ティ 
ノー ド が 複数 並ん で いる 場合 の 前 の ノー ド を 参照 し ます 。 


302 | DOM02 


nextSibiling プ ロ パ ティ 
ノー ド が 複数 並ん で いる 場合 の 次 の ノー ド を 参照 し ます 。 


hasChildNodes メ ソ ッ ド 
ある オブ ジェ クト の 子 ノー ド の 有無 を 返す メソ ッ ド で す 。 この メソ ッ ド に は 引数 は あり ませ 
ん 。 子 を も っ て いる 場合 に は true、 子 を も っ て いな い 場 合 に は false を 返し ます 。 


item メ ソ ッ ド 
指定 し た 参照 番号 の ノー ド を 返し ます 。 


7/77 = document.qetElementById( "argg07") .childNodes.length: 


id 名 parag01 の 子 ノ ー ド の 総数 を 変数 num に 代入 し ます 。 





alert(document.getElementById(pa/gg07').firstChild.nodeName): 
id 名 parag01 の 最初 の 子 ノ ー ド の 名 前 を ダイ アロ グ に 表示 し ます 。 


alert(document.getElementById( り aag07').lastChild.nodeName): 
id 名 Darag01 の 最後 の 子 ノー ド の 名 前 を ダイ アロ グ に 表示 し ます 。 


txtName = document.qetElementById(" な 707") .parentNode.nodeName: 
id 名 txt01 の 親 ノ ー ド の 名 前 を 変数 txtName に 代入 し ます 。 


alert(document.getElementById(" な 77").previousSibling.id): 
id 名 txt01 の 1 つ 前 の ノー ド の id 名 を ダイ アロ グ に 表示 し ます 。 


alert(document.qetElementById(" な 707").nextSibiling.id): 
id 名 txt01 の 1 つ 後 ろ の ノー ド の id 名 を ダイ アロ グ に 表示 し ます 。 





if(7y の 7.hasChildNodes()){ 
alert(" 子 ノー ド あ り "): 


オブ ジェ クト myObj に 子 ノー ド が あっ た 場合 「 子 ノー ド あ り 」 と いう ダイ アロ グ を 表示 し ます 。 


7y の の 7 = document.getElementsByTagName("p").item(0): 
要素 の 最初 の ノー ド を 取得 し 、 変 数 myObj に 代入 し ます 。 








テ ブラ ウザ 対応 表 IE10 1 3:) Fx Chrome Safari Opera iOS6 Android 
〇 O O 〇 〇 O O 〇 O O O 


参照 ノー ド の 種類 や 内 容 を 参照 し た い …・・…・ P308 
ロ 【SAMPLE】 ノ ー ド を 参照 する P322 
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5) 
9) 
AM 





IDOWN03。==S5=5S5 
新しい ノー ド を 作成 し た い 


@ = 誠 .createElement( ぐ ) 要素 ノー ド を 作成 
@ = x.createTextNode(^) テキ スト ノー ド を 作成 





人 @…… 作 成 さ れ た ノー ド 

衣 ……Document オ ブ ジ ェクト 
全 …… 作 成す る 要素 名 

全 …… 作 成す る テキ スト (文字 列 ) 





メソ ッ ド 





ノー ド を 新た に 作成 する メソ ッ ド で す 。 作 成 し た ノー ド は appendChild メ ソ ッ ド や 
IinsertBefore メ ソ ッ ド ( 次 項 参照 ) で ドキ ュ メ ント 構成 内 に 追加 する 必要 が あり ます 。 


createElement メ ソ ッ ド 
作成 し た い 要 素 名 を 引数 と し て 渡す こと で 、 新 た に 要素 ノー ド を 作成 する メソ ッ ド で す 。 


createTextNode メ ソ ッ ド 
作成 し た い テ キス ト (文字 列 ) を 引数 と し て 渡す こと で 、 新 た に テキ スト ノー ド を 作成 し ます 。 


7ew/ ル = document.createElement(" の y"): 
新た に div 要 素 を 作成 し ます 。 


7ew7Xf = document.createTextNode("Hello!"): 
テキ スト ノー ド Hello! を 作成 し ます 。 











ょ ブラ ウザ 対応 表 IE10 | 3:) Fx Chrome Safari Opera iOS6 Android 
(⑳) 〇 〇 〇 O 〇 O O O O 
呈 王 参 ノー ド を 追加 レ したい ドド ドー ドー ・P306 
子 ノー ド を 削除 置換 し た い ・・‥・-・・・・・・-・ P305 
【SAMPLE】 エレメント を 作成 する ・・・ P324 
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le)R0/! 新 | 

し | 

い | 

ゞ 2 

子 ノ ー ド を 削除 置換 し た い ! 
を 

成 

画 王 婦 .removeChild() 子 ノー ド を 削除 し 

マ = 誠 .replaceChild(^,@) シー ド eema い | 

| 

こ pe ーー | 

画 …- 削 除 さ れ た 子 ノー ド マ …… 置 換 さ れ た 子 ノー ド の | 
丸 … ノ ー ド オブ ジェ クト ^…… 置 換 す る 子 ノー ド | 
$… 削 除 する チノ ー ド @…- 置 換 さ れる ノード ド 

| 

ソ ッ ド 削 | 

良守 還 メソ ツ 除 | 

removeChild メ ソ ッ ド 四 | 

指定 し た 直接 の 子 ノー ド を 削除 する メソ ッ ド で す 。 衣 

| 


replaceChild メ ソ ッ ド 
指定 し た 直接 の 子 ノ ー ド を 新しい 子 ノ ー ド に 置換 し ます 。 置 換 対 象 の ノー ド 、 置 換 する 新 し 
い ノ ー ド の 順番 で 引数 を 指定 し ます 。 


c7g/ = document.getElementById("c/ap"): 
如 77o = document.getElementById(" 加 なの"): 


c7ap.removeChild( 加 か の ): 
id 名 chap の オブ ジェ クト か ら id 名 intro の 子 ノー ド を 削除 し ます 。 





7ew7exf = document.createTextNode(" の eg777779") 
c7ap = document.getElementById("c/ap"): 
o/7ex7 = document.getElementById(" 加 7o"): 
c7ap.replaceChild (7ew7ex,, o/77ex7 ): 
テキ スト ノー ド newText を 作成 し 、id 名 chap の オブ ジェ クト の 子 ノ ー ド oldText を newText に 置 
き 換え ます 。 








1 アル ルル ルル: 提 還 | コ リリ 1 13:】 Fx Chrome Safari Opera iOS6 Android 








〇 〇 〇 O O 〇 O 〇 O 〇 〇 O (@) 
l 参照 新しい ノー ド を 作成 し た い ーー P304 
ロ n ノー ド を 追加 し た い ーー ドー -P306 
【SAMPLE】 子 ノー ド を 削除 置換 する ・…・・・・ P326 
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IDON05。。=。。=。。 = = 5 還 還 EE 
ノー ド を 追加 し た い 


マ = 文 .appendChild( 多 ) 子 ノー ド の 未 尾 に 追加 
マ = 文 .insertBefore(, ^ ) の 位置 に 人 
@ = 大 .cloneNode ( 画 ) ノー ド を 析 抽 





マー… 追 加 さ れ た ノー ド 

央 …… ゾ ー ド オブ ジェ クト 

全 追加 する ノー ド 

| る …… 基 準 と する ノー ド 

| @… 複 製 さ れ た ノー ド 

圏 …-true( 子 ノー ド も 複製 する ) /false( 複 製 し な い ) 





- つ っ 馬 詩 メソッド 
ーーmーmーーーーーーーーー ツ ーーー ツ ーー ツー ツー ツー ツー ツー ツー ツーmーーーーーーーーーーーーーーーーーーーーーーーーーーーー 


オブ ジェ クト に 子 ノ ー ド を 追加 し た り 、 ノ ー ド を 複製 する メソ ッ ド で す 。 


] appendChild メ ソ ッ ド 

子 ノ ー ド を 追加 する メソ ッ ド で す 。 追加 し た ノー ド 金 は 、 指 定 し た オブ ジェ クト 文 の 最後 の 
子 ノ ー ド と し て 追加 し ます 。 appendChild メ ソ ッ ド は 特定 の オブ ジェ クト を 移動 させ る 場合 
に も 利用 で きま す 。 


insertBefore メ ソ ッ ド 
特定 の 位置 に 子 ノ ー ド を 追加 する メソ ッ ド で す 。 1 番目 の 引数 に は 追加 する ノー ド を 、2 番 
目 の 引 数 に は どの ノー ド の 直前 に 追加 する の か を 指定 し ます 。 


ー - _』 cloneNode メ ソ ッ ド 
ノー ド を 複製 する メソ ッ ド で す 。 引数 で は 子 ノ ー ド も いっ し ょ に 複製 する か どう か を 指定 し 
ます 。 複製 する 場合 は true、 し な い 場 合 は false を 指定 し ます 。 
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の = document.createElement( "の"): 
document.body.appendChild( ガ ): 
div 要 素 を 作成 し 、 ド キュ メン ト の 最後 に 追加 し ます 。 


79 = document.createElement( "79"): 
document.body.insertBefore(77g,firstChild): 
イメ ー ジ 要素 を 作成 し 、 ド キュ メン ト の 最初 の 子 ノ ー ド の 前 に 追加 し ます 。 





7e77//a7e = document.getElementById( "7e77p/g7e "): 
co/yoge = 7e77//g7e.cloneNode (true): 
id 名 template の 要素 を その 子 ノ ー ド ご と 複製 し ます 。 








ょ ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera iOS6 Android 
O O 9) O 〇 O O 〇 〇 O 〇 
上 参照 2 新しい ノー ド を 作成 し た い P304 
ロ 子 ノー ド を 削除 置換 し た い ・・・…・… P305 
【SAMPLE】 エレメント を 作成 する P324 
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| 
ノー ド の 種類 や 内 容 を 参照 し た い 


8 
M 
文 .n0deName ノー ド 名 を 参照 
文 .nOdeTVDe ノー ド の 種類 を 参照 
文 .taqName 要素 名 を 参照 
文 。n0deValue ノー ド の 値 を 参照 / 設 定 
文 。innerHTML 要素 の HTML/XHTML タ グ と 内 容 を 参照 / 設 定 
] 文 .textContent ノー ド の 文字 列 を 参照 設定 
文 。innerText ノー ド の 文字 列 を 参照 / 設 定 
文 .1d 要素 の id を 参照 設定 





…… ノ ー ド オブ ジェ クト 





プロ パテ ィ 





ノー ド の 種類 や ノー ド の 内 容 を 参照 また は 設定 する プロ パテ ィ で す 。 


nodeName プ ロ パ ティ 

ノー ド 名 を 返し ます 。 
nodeType プ ロ パ ティ 

ノー ド の 種類 を 次 の よう な 数 値 で 返し ます 。 


ノー ド 値 ノー ド の 種類 

1 要 業 。 。 

2 属性 

3 テキ スト 

4 : CDATA セク ショ ン 

5 、 実体 参 照 
ai 実体 宣 言 

の .: 処 理 命令 oo 
全館 3D849S2U3SE 
2 
おお 333 : 文書 型 南 言 

11 ドキ ュ メ ント フラ グ クメン ト 

12 記法 宣言 
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tagName プ ロ パ ティ 

要素 ノー ド の 要素 名 を 返し ます 。 
nodeValue プ ロバ パテ ィ 

ノー ド の 値 を 参照 設定 し ます 。 
innerHTML プ ロ パ ティ 

要素 が 含む HTML / XHTML タ グ や 要素 内 容 を テキ スト と し て 参照 / 設 定 し ます 。 タ グ を 含 
め な い 文 字 列 の み の 場合 は 、innerText や textContent を 使用 し ます 。 
textContent、innerText プ ロ パ ティ 

ノー ド の 内 容 ( 文 字 列 ) を 参照 設定 し ます 。innerText プ ロ パ ティ は IE の 拡張 で Firefox で は 
使用 で きま せん 。 標準 の textContent プ ロ パ ティ は IE9 以 降 と 主要 ブラ ウザ で 使用 で きま す 。 
id プロ パテ ィ 

要素 の id 名 を 参照 / 設 定 し ます 。 


N 
の 


3 記さ 北 商 3 テー へ ヽ 


て 環 9R 


ー 
ー 


| 
| 
| 
| 
| 
| 
ト 
| 


7/a/7e = document.getElementById("p7cgp").nodeName: 
id 名 pickup の ノー ド の 名 前 を 変数 nName に 代入 し ます 。 
document.write(document.qetElementById("p7cgp").nodeType): 
id 名 pickup の ノー ド の 種類 を 表示 し ます 。 
if(sa77p/e7.tagName == "p") { 
alert( "sample1 は p 要 素 で す "): 


オブ ジェ クト 名 sample1 の 要素 名 が p だ っ た ら 「sample1 は p 要 素 で す 」 と いう ダイ アロ グ を 表示 
し ます 。 
7Mg//e = document.getElementById( "pcgp") .nodeValue: | 
id 名 pickup の ノー ド の 値 を 変数 nValue に 代入 し ます 。 | 
document.getElementById("p7cgp").innerHTML = "<a hrefhttp://wwwank. 
COo.jp/ ツ 株 式 会 社 ア ンク </a>『 
id 名 pickup の 内 容 を 株 式 会 社 ア ンク へ の リン ク に 設定 し ます 。 
document.getElementById("p7cgp").textContent = "株 式 会 社 ア ンク " 
id 名 pickup の 内 容 を 株 式 会 社 ア ンク に 設定 し ます 。 | ト 
alert(document.getElementByTagName("p")[O].id): 
ドキ ュ メ ント 内 の 最初 の p 要 素 の id 名 を ダイ アロ グ に 表示 し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 1 に: Fx Chrome Safari Opera iOS6 Android 

innerText O O O ※ O O O 〇 O 〇 O 

textContent 〇 3 メ O O O O O 〇 O 

その 他 (30 〇 〇 O 〇 ( ⑤ 6) (9】 | D 
O 


参照 】 メー ド を 参照 し た UY eeereeenests P302 | 
7 
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属性 を 参照 し た い 





文 .attributes 属性 を 参 

^ = 文 .getAttribute() 性 の 休 を 取得 

@ = 誠 .detAttributeNode( 多 ) 時 ノ ー ド ep 

一 = .hasAttribute() 指定 し た 司 性 の 有無 を 調べ る 

画 = 誠 .hasAttributes() 属性 の 有無 を 調べ る | 
aa | 

廊 …… ノ ー ド オブ ジェ クト | 

^… 周 性 値 | 

る … 必 性 名 | 

@… 属 性 ノー ド 


還 …-true ま た は false( 属 性 が ある : true プ な い : false) 





藍 皇 還 プロ バテ ィ (attributes) | 
メソ ッ ド (getAttribute、getAttributeNode、hasAttribute、hasAttributes) | 


要素 ノー ド の 属性 を 操作 し ます 。 


attributes プ ロ パ ティ 
属性 の リス ト を 参照 し ます 。 


getAttribute メ ソ ッ ド 
指定 し た 名 前 の 属性 多 の 値 を 取得 する メソ ッ ド で す 。 指定 し た 属性 が な か っ た 場合 は 空 の 文 
字 列 ⑩ を 返し ます 。 


getAttributeNode メ ソ ッ ド 
指定 し た 名 前 の 属性 ノー ド を 取得 する メソ ッ ド で す 。 指定 し た 属性 ノー ド が な か っ た 場合 は 
null を 返し ます 。 


hasAttribute メ ソ ッ ド 
で 指定 し た 属性 の 有無 を 調べ 、 あ る 場合 に は true、 無い 場合 に は false を 返す メソ ッ ド で す 。 


hasAttributes メ ソ ッ ド 
属性 の 有無 を 調べ 、 あ る 場合 に は true、 無 い 場合 に は false を 返す メソ ッ ド で す 。 
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g が s = document.qetElementsByTaqName("table") [0O].attributes.length: 
最初 の table 要 素 が 持つ 属性 の 数 を 変数 atts に 代入 し ます 。 


7 = document.getElementById("7j97"): 
77 訪 = 797.getAttribute("width"): 
alert(W7 の 万): 

id 名 img1 の 要素 が 持つ width 属 性 の 値 を ダイ アロ グ に 表示 し ます 。 


p7 = document.getElementById("p7"): 
77477 = p7.getAttributeNode("id"): 
id 名 p1 の 要素 で ノー ド 名 が id で ある 属性 ノー ド を 変数 idAttr に 代入 し ます 。 


7797 = document.getElementById("7797"): 
777e = 797.hasAttribute("title"): 
alert(title): 
id 名 img1 の 要素 が title 属 性 を 持っ て いる か どう か を 調べ 、 そ の 結果 を ダイ アロ グ に 表示 し ます 。 





の 7 = document.getElementById(" の 7"): 
/as4777 = の 7.hasAttributes(): 
id 名 div1 の 要素 が 属性 を 持つ て いる か どう か を 調べ 、 そ の 結果 を 変数 hasAttr に 代入 し ます 。 





pr ブラ ウザ 対応 表 IE10 1 1 ゴ :】 Fx Chrome Safari Opera iOS6 Android 
O O O の ⑳) O 〇 O O 
参照 属性 を 作成 / 設 定 し た い ・…ーーー P312 
d 属性 を 削除 し た い … バ ーーーーーー P314 
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ミ O ロ 





属性 を 作成 設定 し た い 


@ = document.createAttribute() 吐き ft 








文 .setAttribute(,^ ) 属性 と 値 を 追加 
論 .setAttributeNode(@) 周作 ノー ド を 人 
@… 属性 ノー ド is 了 Ei 暫 
【 】 TI 属性 名 

玉 …… ノ ー ド オブ ジェ クト 

2 介 zes 値 

メソ ッ ド 





要素 に 対し て 、 新 た に 属性 を 作成 し た り 、 既 存 の 属性 に 変更 を 加え る メソ ッ ド で す 。 


createAttribute メ ソ ッ ド 
指定 され た 名 前 の 属性 オブ ジェ クト を 新た に 作成 し ます 。 作 成 し た 属性 は setAttributeNode 
メソ ッ ド で 要素 に 追加 する 必要 が あり ます 。 


setAttribute メ ゾ ッ ド 
指定 され た 名 前 の 値 を 持つ 属性 を 新た に 追加 し ます 。 ま た は 指定 され た 名 前 を 持つ 既存 の 属 
性 の 値 を 変更 し ます 。 


setAttributeNode メ ソ ッ ド 
新た に 属性 ノー ド を 追加 し ます 。 
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pgCo/ = document.createAttribute("bgcolor"): 
pgCo/.nodeValue = "#000000": 
document.body.setAttributeNode (の gCo/): 
値 を 黒 (#000000) に 設定 し た bgcolor 属 性 を 作成 し 、bgCol と いう 名 前 の 属性 ノー ド と し て 追加 
し ます 。 


7g0 が 7 = document.createElement("imd"): 
77g0/7.setAttribute("src","accessmap.jpd"): 
オブ ジェ クト 名 imgObI の イメ ー ジ 要素 を 作成 し 、src 属 性 に accessmap.jpg を 設定 し ます 。 





p ブラ ウザ 対応 表 IE10 1 3:】 Fx Chrome Safari Opera ijOS6 Android 


O 〇 O @⑨ 〇 O O O O O 








参照 周作 を 参 順 じたい Sysye eeeSiozs ers P310 
貞明 / 属性 を 削除 し た いい ーーー ドー P314 
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設 
定 
し 
だ 
い 

















属性 を 削除 し た い 「 


@ ニ 誠 .removeAttribute() 属性 を 削除 
画 王 文 .removeAttributeNode( 人 人 ) 中 ノ ー ド を 前 








較 …… 削 除 さ れ た 属性 ノー ド 





馬 皇 還 メソ ッ ド 





要素 か ら 属 性 や 属性 ノー ド を 削除 する メソ ッ ド で す 。 


removeAttribute メ ソ ッ ド 
指定 し た 属性 多 を 削除 し ます 。 


removeAttributeNode メ ソ ッ ド 
指定 し た 名 前 の 属性 ノー ドム を 削除 する メソ ッ ド で す 。 


document.qetElementById(" ル 7").removeAttribute("align"): 
id 名 div1 の 要素 か ら align 属 性 を 削除 し ます 。 


/7 = document.getElementById("p7"): 
p7.removeAttributeNode(attr): 
id 名 p1 の 要素 か ら atrr と いう 名 前 の 属性 ノー ド を 削除 し ます 。 











ょ ブラ ウザ 対応 表 IE10 1 ゴリ 3:) Fx Chrome Safari Opera iOS6 Androidg 
O 〇 O ⑩ 〇 O O O 〇 〇 O 〇 

| 属性 を 参照 し た い ・ ーーーーーーー P310 

左 参 属性 を 作成 設定 し た い ・…ー ーー P312 
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記 SY5L 議 還 議 議 議 議 議 語 了 = =06〔 ゆ ル 
CSS の スタ イル を 操作 し た い 


文 style. 





スタ イル プロ パテ ィ 





プロ パテ ィ 





HTML 要 素 の CSS ス タイ ル を 操作 する に は 、 要 素 の style プ ロ パ ティ に 格納 され る 、 ス タイ 
ル 宣 言 オ ブ ジ ェクト を 利用 し ます 。 この オブ ジェ クト に は 、CSS プ ロ パ ティ に アク セス する た 
め の プ ロ パ ティ が 、1 対 1 対応 で 用 意 さ れ て いま す 。 プ ロ パ ティ 名 は 以下 の 規則 で 対応 し て い 
ます 。 





CSS の プロ パテ ィ ! スタ イル プロ パテ ィ 規則 

Na ろ 「 「-」 (ハイ フン ) が 含ま れ て いな い プ ロ パ ティ は GS: 
MA la ! の プロ パテ ィ と 同じ 

Tntrweight 2 :fontWeight 。 :[-」( ハ イフ ン ) が 含ま れ て いる プロ パテ ィ で は 「-」 
:border-top-style borderTopStyle : を 除き 、 「-」 の 次 の 文字 を 大 文字 に し て つなぐ 


document.fontColor() や document.bgColor() な どの 、 文 字 装 飾 等 、 直 接 外観 を 操作 する 
メソ ッ ド は 、 本 項 や 次 項 で 解説 する よう な CSS 操 作 に よっ て 原則 と し て 代替 可能 で す 。 





yg/e77e7 た Style.fontSize = "smaller": 
要素 の フォ ント サイ ズ を smaller に 設定 し ます 。 








ょ ブラ ウザ 対応 表 IE10 1 3: Fx Chrome Safari Opera iOS6 Android 
〇 O O () 〇 O 〇 O O 〇 〇 O 【(⑧ 


中 参照 7 スタ イル シー ト を 操作 し レ し たい Pa16 
| 1 
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ン 本 で 二 満 性 G の の の 
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ミ O ロ 








SE 議 議 議 議 議 議 議 議 議 べべ 
スタ イル シー ト を 操作 し た い 


X = document.styleSheets[ 参 照 番 号 ] スタ イル シー ト の 人 
= X.rules[ 参 照 番号 ] / .CSsRules[ 参 照 番号 ] Gs,-! の me 
文 .inseItRule (4, 挿入 位置 ) GS ルー ル の 
X.addRule(@, 国 ) (ルー ル の 人 
誠 .deleteRule (参照 番号 ) (SS ルー ル の 削除 





衣 …… ス タイ ル シ ー ト ・ オ ブ ジ ェクト 
人 CSS ルール ・ オ ブ ジ ェクト 

人 る ……(CSS ル ー ル 文 

全 ……CSS セ レク ター 文 

一 … ス タイ ル 宣 言 文 





プロ パテ ィ (styleSheets、rules、cssRules) 
メソ ッ ド (insertRule、addRule、deleteRule) 
om 


個別 の 要素 の CSS ス タイ ル だ け で は な く 、CSS フ ァイル や style 要 素 に 記述 する スタ イル 設 
定 も 、 オ ブ ジ ェクト と し て 参照 ・ 操 作 で きま す 。 


document オ ブ ジ ェクト の styleSheets プ ロ パ ティ に は 、 ペ ー ジ 内 の style 要 素 や 外部 CSS フ 
ァイル を 表す スタ イル シー ト ・ オ ブ ジ ェクト が 、 配 列 形式 で 格納 され ます 。 


スタ イル シー ト ・ オ ブ ジ ェクト の rules プ ロ パ ティ (IE8 ま で の IE) また は cssRules プ ロ パ ティ 
(IE9 以 上 と 主要 ブラ ウザ ) に は 、 同 様 に 、CSS5 ル ー ル ・ オ ブ ジ ェクト が 配列 形式 で 格納 され ま 
す 。 こ の CSS ル ー ル ・ オ ブ ジ ェクト は 、「div#idicolor:blacklj」 の よう な CSS 指 定 の 単位 と な る 
文 (CSS ル ー ル ) を 表し ます 。 


CSS ル ー ル を 特定 の スタ イル シー ト に 追加 する に は 、insertRule() メ ソ ッ ド (IE9 以 上 と 主要 
ブラ ウザ ) か が addRule() メ ソ ッ ド (IE8 ま で の IE) を 使用 し ます 。 


insertRule() メ ソ ッ ド で は 第 1 引数 に CSS ル ー ル の 記述 を 文字 列 で 指定 し ます 。 次 の 引数 に 、 


挿入 する 位置 を 数 値 で 指定 し ます 。 CSS で は 後 の 位置 に ある ルー ル が 優先 され る た め 、 上 書き 
し た い 場 合 は 通常 、 最 後 ( 娘 .rules.length) に 挿入 し ます 。 
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addRule() メ ソ ッ ド で は 、 第 1 引数 に CSS セ レク ター を 、 第 2 引数 に スタ イル 宣言 を 指定 し ま 
す 。 CSS セ レク ター は CSS ル ー ル の 「1」 の 前 に ある 対象 指定 部 分 で 、 ス タイ ル 宣 言 は 「1」 の 中 に 
ある 内 容 指定 部 分 で す 。 必 ず 最 後 の 位置 に 挿入 され ます 。 


insertRule()( メ ソ ッ ド で は 、「@media」 な どの @ ル ー ル も 挿入 で きま す 。 


た と えば 、 外 部 CSS の イン ポー ト を 「@import」CSS ル ー ル に よっ て 行う こと が で きま す 。「@ 
importICSS ル ー ル は スタ イル シー ト の 冒頭 に ある 必要 が ある の で 、「insertRule(@import 
url("out.css"), 0)」 の よう に な り ま す 。 


CSS ル ー ル を 削除 する に は 、deleteRule() メ ソ ッ ド に 削除 し た い CSS ル ー ル の 参照 番号 を 指 
定 し ます 。 


var seer = document.styleSheets[0]: 
] 番目 の スタ イル シー ト を 取得 し ます 。 


Var //e = sheet.cssRules[0]: 
その 1 番目 の CS55S ル ー ル を 取得 し ます 。 


sheet.insertRule("body [ color: green: 1", sheet.cssRules.length): 
スタ イル シー ト の 最後 に に CSS ルー ル を 追加 し ます 。 





p ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera jiOS6 Android 


〇 O O 〇 O O O O O O 


凌 照 CS5 の スタ イル を 操作 し た い ・…・ P315 
ジ が スタ イル シー ト の CSS ルー ル を 操作 し た い ・‥・ P318 
【SAMPLE】 ス タイ ル シ ー ト を 操作 する ・・・・・・ P328 
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EpS 計 統 議 議 議 議 議 謗 0 へ ハ 0 べ べべ べべ 


スタ イル シー ト の 
CSS ル ー ル を 操作 し た い 


文 .tVDe (SS ルール の タイ プ を 表す 数 値 

文 .cssText その ルー ル の (SS 記述 文 
.selectorText CSS セ レク ター 

.style スタ イル 便 言 オブ ジェ クト 

4.encodinq 文字 コー ド 名 

人 @.media イン ポー ト し た スタ イル シー ト の 対象 メデ ィ アタ イブ | 
@.href イン ポート し た スタ イル シー ト の URL 
@.styleSheet イン ポー ト し た スタ イル シー ト の オブ ジェ クト 
一.media @media ル ー ル の 対象 メデ ィ アタ イブ 

一 cssRules @media ブ ロッ ク に 属す る CSS ルー ル の リス ト 





……CSS ル ー ル ・ オ ブ ジ ェクト (共通 ) 

ぐる ……CSS ル ー ル ・ オ ブ ジ ェクト (スタ イル ・ ル ー ル ) | 
^ ム ……CSS ル ー ル ・ オ ブ ジ ェクト (@charset ル ー ル ) | 
@……CSS ル ー ル ・ オ ブ ジ ェクト (@import ル ー ル ) 
圏 ……CSS ル ー ル ・ オ ブ ジ ェクト (@media ル ー ル ) 








プロ パテ ィ 
ーーーーーーーーーーーー……ー…ーーーーー ヤ ーー ヤーー ヤ mm 

スタ イル シー ト ・ オ ブ ジ ェクト 経由 で 取得 で きる CSS ル ー ル ・ オ ブ ジ ェクト は 、 そ れ が 表し 
て いる CSS ル ー ル の 種類 に よっ て 持っ て いる プロ パテ ィ が 異な り ま す 。 


種別 は 共通 の type プ ロ パ ティ に 格納 され ます 。 「1]」 が スタ イル ・ ル ー ル (@ ル ー ル 以外 の 通常 
の 指定 )、「2] が @charset、「3」 が @import、「4]」 が @media、「5」 が @font-face、「6」 が @page、 
「0」 が 未 サ ポー ト の ルー ル で す 。 サ ンプ ル に 記載 の 定数 も 参照 くだ さい 。 


スタ イル ・ ル ー ル の SselectorText プ ロ パ ティ に は 、CSS ル ー ル の 記述 の 「1」 の 前 の 対象 指定 
(CSS セ レク ター) が 、style プ ロ パ ティ に は スタ イル 宣言 オブ ジェ クト が 格納 され ます 。 


スタ イル 宣言 オブ ジェ クト に は 、CSS プ ロ パ ティ と 対応 し た 各 プ ロ パ ティ が あり 、 ス タイ ル 
の 取得 ・ 設 定 が 可能 で す ( 詳 細 は 「CSS の スタ イル を 操作 し た い 」p.315 を 参照 くだ さい )。 
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@charset ル ー ル に は 、encoding プ ロ パ ティ が 存在 し 、 文 字 コ ー ド 指定 を 取得 で きま す 。 
通常 、CSS の 読み 込み は 完了 し て いる た め 、 変 更 し て も 反映 は され ませ ん 。 


@import ル ー ル に は href プ ロ パ ティ 、media プ ロ パ ティ 、styleSheet プ ロ パ ティ が 存在 し 、 
styleSheet プ ロ パ ティ の 中 身 は イン ポー ト さ れ た スタ イル シー ト の オブ ジェ クト で す 。 


@media ル ー ル に は media プ ロ パ ティ に 加え 、cssRules プ ロ パ ティ と insertRule() メ ソ ッ ド 、 
deleteRule() メ ソ ッ ド が 存在 し 、@media ブ ロッ ク 内 の CSS ル ー ル に アク セス で きま す 。 


また 、 共 通 の cssText プ ロ パ ティ で 、 そ の CSS5 ル ー ル の 記述 内 容 を 文字 列 で 取得 で きま す 。 


var 7/e = document.styleSheets[0].cssRules[0]: 
css ル ー ル を 取得 し ます 。 


document.wrilte(rule.cssText): 
取得 し た CSS ル ー ル の 記述 を 出力 し ます 。 





p ブラ ウザ 対応 表 IE10 1 3:】 Fx Chrome Safari Opera iOS6 Android 
O 〇 O O 〇 O 〇 O O O 〇 O 〇 


CSS の スタ イル を 操作 し た い 
参照 】 スタ イル シー ト を 操作 し た い 


-P 
【SAMPLE]】 スタ イル シー ト を 操作 する …・…・ P328 
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DOM.SAMPLE-01 


オブ ジェ クト の 情報 を | 
取得 する | 


入力 テキ スト が 未 入 力 の と き に エラ ー メ ッ セ ー ジ を 表示 する サン プル で す 。[OK] ボ タン が 
クリ ッ ク さ れる と clickOK 関 数 を 呼び 出し ます 。 すべ て の テキ スト 入力 フィ ー ル ド の 入力 チェ 
ッ ク を 行い 、 未 入力 の 場合 <span> タ グ 内 に エラ ー メ ッ セ ー ジ を 表示 し ます 。 

loadPage 関 数 は 、XHTML の <input> タ グ に onclick 属 性 を 設定 し た と き と 同 じ こ と を し て 
いま す 。getElementBylId メ ソ ッ ド は 、 そ の 要素 の 読み 込み 終了 時 で な いと エラ ー に な る た め 、 
1 行 目 で onload イ ベン ト を 設定 し 、 ペ ー ジ 読み 込み 終了 時 に この 関数 を 呼び 出し て いま す 。 





window.onload = /gagPg9e: ソイ ベン ト の 





// ペ ー ジ 読み 込み 時 の 処理 を する 関数 

function /ggg/7g9e り { 
document.qetElementById("o ん ").onclick = clickOK: 

} 


// 選 択 し た 文字 列 を テキ スト ボッ クス に 表示 させ る 関数 
function c/7c ん の ん { 
for(var7= 0:7 < document.getElementsByTagName("p").length:++){ 
Var 7ex7 の = "text"+ た 
Var s/g77 の = "span"+ か た 
if(document.qetElementById(zex7 の ) .value == ""){ 
document.getElementById(spa77 の ) .innerHTML = "※ こ の 項目 は 必須 で す ! 
< く br /> リ 
}elset 
document.getElementById(spa77 の ) .innerHTML = "": 
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<bodV> 
<diV> 


<D テ > 
お 名 前 : <1nput type="text" id="7ex70" /> 
<SsDan id="spg70"></sSDan> 

</P> 

<D テ > 
フリ ガ ナ : <input type= "text" id="7ex77" /> 
<sDan 1d="spg77 "></span> 

</D> 

<D テ > 
住所 : <input type="text" id="7exf2" /> 
<spDan 1d="spg72"></SDan> 

</P> 

<D> 
電話 番号 : <1nput type="text" id="zex/ ヲ " /> 
<sDan 1d="spg7 ラ "></SDan> 

</D> 

<D> 
メー ル ア ド レス : <input type="text" id="7ex72" /> 
<SDan 1d="spa74"></SDan> 

</D> 

<input type="button" id="o" value="OK" /> 

</div> 

</bodV> 


Internet Exp 


※ 文 字 色 は 外部 CSS で 指定 し て いま す 





























を jpn'shoeshaco お ・ 自 の | ジェ クト や タグ の 情報. メ 





お 名 前 :| 閣 詠 太郎 
フリ ガ ナ : | レ ョ ウェ イ タロ ウ 
住所 : ※ こ の 項目 は 必 で す ! 


電話 番号 : |] ※ こ の 項目 は 必須 で す ! 





































E1 


未 入力 欄 に 対し て メッ セー ジ が 表示 され ます 


| 参照 getElementByld メソ ッ ド ーー ーー P300 
| の getElementsByTagName メソ ッ ド ・‥・…・… P300 


オルガ ギレ ーーーーーー」※ に の mW はめ 放す | 
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の dl 芝 周 本 畿 彰 き ナ さ HAN 








DOM.SAMPLE-02 


| 
ノー ド を 参照 する | 


NE 


ノー ド 情 報 を 参照 し て 表示 する サン ブル で す 。 こ の サン プル で は head 要 素 の 情報 を 参照 し 
て いま す 。 参照 する ノー ド が 存在 する 場合 は object を 返し 、 そ の ノー ド の 情報 を さら に 参照 
で きま す 。 ノ ー ド が 存在 し な い 場 合 は null を 返し ます 。 








window.onload = loadPade: ー ジ ロー ド 時 の イベ ント を 設定 


/ ペ ー ジ ロー ド 時 の 処理 

function /oagPgge り { 

| Var 7777 = リリ 

Var 7 = document.qetElementById(" の 7"): 

Var ea = document.qetElementById("/ea9"): 

= // ノ ー ド 情報 を 参照 し て HTML を 作成 
7777 += " 親 ノ ー ド (parentNode) :"+ カ ea の .parentNode.nodeName + "<br /> リ 
7477/ += "1 つ 前 の 兄弟 ノー ド (previousSibling) : " + ea.previousSibling + "<br 

/> 
77 += "1 つ 後 の 兄弟 ノー ド (nextSibling) :" + ea の .nextSibling.nodeName + "<br 

se 1 > 
7777/ += " 子 ノ ー ド が ある か (hasChildNodes) :" + eg.hasChildNodes() + "<br 

/> の 5 
77777 += " 子 ノー ド の 数 (childNodes) : " + 7ea の .childNodes.length+" (の 

/ す べ て の 子 ノ ー ド の nodeName を 取得 

ー g ヨ for( た 0: </eag.childNodes.length: な +){ 

| html += ea の .childNodes.item (7 .nodeName+" "の: 

} 

| 7 += の)< く br /> リ 

| // ノ ー ド 情報 を 参照 し て HTML を 作成 

77/ += "最初 の 子 ノ ー ド (firstChild) :" + 7eag.firstChild.nodeName + "<br />": 














ーー 一 
| 7777/ += "最後 の 子 ノー ド (lastChild) : "+ eag.lastChild.nodeName + "<br />": 
| // 作 成 し た HTML を div タ グ 内 に 表示 させ る 
| 77.innerHTML = 万 7/: 
| 
ー | 
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<body> 
<div id=" の の"> 
<b>head 要 素 の 情報 </D> 


</div> 
<hr /> 
<div id=" の 7"> 
</ div> 
</bodV> 


Internet Exp 













を 往 http:/ywww.shoeisha.oo D・C | 台 ノー ド 情 報 を 参照 し た い  ※ 
Lead 要素 の 情報 


親 ノ ー ド (parentNode):HTML 
1 つ 前 の 兄弟 ノー ド (previousSibling): null 

1 つ 後 の 兄弟 ノー ド (nextSibhing):#text 

子 ノ ー ド が ある か (hasChildNodes): true 

子 ノ ー ド の 数 (childNodes): 7 text META #text TITLE *text SCRTPT #ext ) 
最初 の 子 ノ ー ド (frstChild): ext 

最後 の 子 ノ ー ド (astChild): #text 








参照 childNodes プロ パテ ィ イー ーー ドー P302 previousSibitng プロ パテ ィ ーーー P302 
ピ ネ firstChild プロ パテ ィ …・・ P302 nextSibilng プロ パテ ィ ーー ドー P302 
lastChild ブロ パテ ィ ・・ ー…・P302 hasChildNodes メソ ッ ド ーーーーーー P302 
ParentNode プロ パテ ィ ・・-・ーーーーーーーー・ 9 つこ と 7) P302 
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DOM.SAMPLE-03 


エレ メン ト を 作成 する 


ト さ o)」 





JavaScript で く option> タ グ を 作成 する サン プル で す 。 ペ ー ジ ロー ド 時 に あら か じ め 作 成 し 
た 配列 の 要素 を 利用 し て 、option 要 素 を 作成 し ます 。document.createElement('option") 
で option 要 素 を 作成 し 、 そ の value 値 に 配列 の 要素 (URI) を 指定 し て いま す 。 た だ し 「 選 択 し 
て 下さ い 」 で は value 属 性 に defalut と いう 文字 列 を 代入 し て お き 、 こ の 項目 で は 何 も 処理 を 行 
わな いよ う changeSelect 関 数 で 分 岐 さ せる よう に し て いま す 。 

また 、 画 面 表示 用 の テキ スト は createTextNode メ ソ ッ ド で 作成 し 、appendChild メ ソ ッ 
ド で option 要 素 に 追加 し て いま す 。 最後 に select 要 素 の id を 指定 し て appendChild メ ソ ッ ド 
で option 要 素 を 追加 し ます 。 





Var が 5: 
+ Var Mg/e5: 


// ペ ー ジ ロー ド 時 に option 属 性 を 生成 する 関数 
function page/ggg) { 
se/ecfE/e/7 = document.getElementById("se/ecf"): 
が が な = new Array( "選択 し て 下さ い ", "株 式 会 社 ア ンク ", "株 式 会 社 翔 泳社 "): 
vg//es = new Array("default", "http://wwwank.cojjp/", "http://Www.shoeisha. 
cojp/"): 
// 配 列 の 要素 分 だ け option 要 素 を 生成 
for( た 0:7< な な 5.length: れ +){ 
Var e/e/7 = document.createElement("option"): //option 要 素 を 生成 
Var 5 な = document.createTextNode (txts[i] ): // 配 列 の 要素 で テキ スト を 生成 
e/e/7.Value = values[ 胃 : //option 要 素 の value 値 に 配列 の 要素 を 代入 
e@/e/77.apDendChild(s な ): // 生 成 し た option 要 素 に テキ スト を 追加 
se/ec7/e/77.appendChild(e/e/7)://option 要 素 を 追加 
} 
| 有馬 
// 選 択 され た 項目 の WebD ペ ー ジ を 開く 関数 
function ca7ge5e/ec7 り { 
Var 277gy 中 //e = values[se/ec7E/e77.selectedIndex]: 
ーー f(a/7gyIg//e == "default"){ 
return: 


} 


window.open(a/7ayMg//e,。 の" リリ): 
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<body onload="page/ga7 り "> 


<D> 1 
<b>option 属 性 を javaScript で 生成 し て いま す </b> 
</D> 





<D> 
<select id="se/ec7" onchange="c7a7ge5e/ecf() "> 
</select> 
</P> 
</bodV> 


の 叶 葵 認 テ ツメ で H 





Internet Exp 








JavaScript で ブル ダウ ン メ ニュ ー を 作成 し ます 











[ ミ O ロ ] 


createElement メソ ッ ド 
| 参照 】 createTextNode メソ ッ ド 


appendChild メソ ッ ド ーーー ドー 、 
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DOM.SAMPLE-04 


子 ノー ド を 削除 ノ 






ミ O ロ 


質問 デキ スト が クリ ッ ク さ れ た 際 に 回 答 を 表示 する サン プル で す 。 質問 テキ スト が クリ ッ ク 
され る と clickQ 関 数 を 呼び 出し 、appendChild メ ソ ッ ド で 回 答 を 表示 する ノー ド を 作成 し 、 
表示 し ます 。 す で に 他 の 回 答 を 表示 し て いる 場合 は removeChild メ ソ ッ ド で 削除 し ます 。 





window.onload = /gag/g9e: // イ ベン ト の 設定 


// 変 数 の 設定 
Var 7 = 
Var g7se/s = new ArraV("A1 TTA2 TTA3 TTA4 WWA5:W): 


Wa 
7 


// ペ ー ジ 読み 込み 時 の 処理 を する 関数 
1 function /oag7gge り { 
| //<h4> タ グ の id='q0-ー4' ま で の ノー ド に onclick イ ベン ト を 設定 
for(var た 0: た 5: な +){ 
document.qetElementById("9"+7).onciick = function(){ 
c77c0(this.id) 





} 
} 


//id="q0ー4"' ま で の ノー ド の onclick イ ベン ト に 設定 し た 関数 
』 function c/7c0(e/e77/ の ){ 
if(777 != ""){ // 他 の 回 答 が 表示 され て いる 場合 
Var 7e/ ル = document.qetElementById(" の 7"+7/77): 
document.getElementById( "のり "+7g77).removeChild(7e/7y): // ノ ー ド を 削除 





} 
// 引 数 で 取得 し た ノー ド の id(q0~q4) の 数 字 部 分 を 抜き 出し て 変数 num に 代入 
77777 = @/e/77 の .charAt( 1) 
Var e/e77 の 7 = document.getElementById(" の が"+7g77)7 // フ リッ ク さ れ た ノー | 
Var 7ew/e/7 = document.createElement(" の "): / 新 し い エ レ メ ン ト を 作成 
7ew//e/7.1d = "777"+ カ 777: // ロ を div1 Tnum(div10-14) に 設定 
7eW/e/77.innerHTML = "<span>' 十 answers[7 の 7] 寺 " く /sSDan> "2 

/ ノ ー ド の 中 に HTML( 回 答 ) を 挿入 
e/e77/7r.appendChild (7ew/e77): // フ リッ ク さ れ た ノー ド の 最後 尾 に 作成 し た ノー ド を 捕 メ 
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※ 文 字 色 は 外部 CSS で 指定 し て いま す 






















<bodV> 
<div id=" の 0 の "> 
<p 1d="g0">Q1 : </P> 
</div> 
<div id=" の 7"> 
<D 1d="97 ">Q2 : </P> 
</div> 
<div id= "2"> 
<P id="g2">Q3 : </p> 
</div> 
<div id=" の 3"> 
<D 1d="9 ラ ">Q4 : </P> 
</div> 
<div id= "72"> 
<D 1d="94 ">Q5 : </D> 
</div> 





Internet Exp 


を 





eeeeo つ ー so 


質問 テキ スト を クリ ッ ク す る と 、 回 答 が 表示 され ます 


| remeoveChild メメ ツ ド こっ こっ oto2ou 2 コッ P305 
| | 参照 
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DOM.SAMPLE-05 





。 スタ イル シー ト を 
操作 する | 


取得 し た スタ イル シー ト ・ オ ブ ジ ェクト に CSS ル ー ル を 追加 し 、 結 果 を 画面 に 出力 し て いま 
す 。 画面 の 文字 の 大 き さ は 、 動 的 に 追加 し た ルー ル に よる も の が 表示 に 反映 され て いま す 。 最 
初 の 部 分 の 画面 出力 用 の オブ ジェ クト 定義 の 部 分 は 、 独 自 す オブ ジェ クト を 定義 し て 、 バ ッ フ ァ 
を 利用 し た 画面 出力 を 行え る よう に し て いま す 。 





writeCSSRules 関 数 は @import の 場合 は 、 イ ン ポ ー ト し た CSS に 自分 自身 を 入れ 子 に な る 
形 で 再度 適用 し て いま す 。 種別 の 判定 に は 以下 の CSS ル ー ル ・ オ ブ ジ ェクト の 定数 を 使用 し ます 。 


ーーーーーーーーーー 一 


定数 名 | 値 | 定数 名 | 値 
| !UNKNOWN_RULE o MEDIA_RULE 4 
| jsSTYLERULE 1 FONTFACE RULE 5 
| !CHARSET_RULE 2 「PAGE RULE 6 
| HMPORTRULE 3 ! 押 間 凍 


この サン プル は IE9 以 上 と 標準 準拠 の 他 の ブラ ウザ に 対応 し て いま す 。 





body{ 
background-color: black: 
color:green: 


} 








@import url(dom05.css) screen: 


@media print{ 
bodyt 
background-color:white: 
color:black: 
} 
| } 





@media screen{ 
hrtwidth:50%:} 
} 
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7//////////////////// ここ か ら 画 面 出力 用 オブ ジェ クト 定義 








function 0 わり { // コン スト ラク ター 定義 
this.buffer = "": // バッ ファ の 初期 化 | 
} | 
Output.prototype.add = 7c77(7ex7) { // add メ ソ ッ ド 定 義 
this.buffer += ex // バッ ファ に 追加 
Output.prototype.write = 7c7o7 り { // write メソ ッ ド 定 王 
if (this.e/ === undefined) { // 初回 使用 時 に 初期 化 
this.e/ = document.qetElementById( "og が ): 














の el 寺 藩 N テ ナー ツユ 必 


this.e/.innerHTML = this.bufferz // バッ ファ を 出力 
this.buffer = "": // バッ ファ の クリ ア 

じ 

/////////////////// ここ まで 画面 出力 用 オブ ジェ クト 定義 











// 画面 出力 用 オブ ジェ クト の 生成 
Var og の /7 = new Output(): 








// CS5S 書 き 出し 処理 
function 77feCS5g/es(S7ee り { 





if (!sheet) { 
return: 


// すべ て の CSS ル ー ル に つい て 処理 
97 の.add( "<ol>"): // 出力 用 オブ ジェ クト に 書き 込み 
for (var7= 0: 7 < sheet.cssRules.length: か +) { 
Var ///e = sheet.cssRules[i]: 
// 取得 し た ルー ル の CSS 記 述 を 出力 
gg の / た add("<li>" + rule.cssText): 
// @import ル ー ル か 判定 
if (rule.type === rule.IMPORT_RULE) { | 
// イン ポー ト し た CSS に つい て 再帰 的 に 処理 
writeCSSRules(rule.styleSheet): 








} 
op た add("</li>"): 


} 
97 の / た add("</o に "): 
} | 


// 初期 化 処理 

window.onload = function() { 
var s/ee7 = document.styleSheets[0]: 
// CS5S ル ー ル の 追加 
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| writeCSSRules(s/ee7): 


| seer.insertRule("div#output {font-size: 20pt:}", 1): | 
9 の /7.write (): | 
] 


<bodV> 
<div id="o/ の "></div> 
</body> 











動 的 に 追加 し た 結果 の CSS が 表示 され ます 
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スタ イル シー ト を 提 作 する 小 


shoeisha.com 








イ 。 869%(m) 
スタ イル シー ト を 操作 する 





ー P316 
・P318 


DOM.SAMPLE-05 | 331 





D 
O 
M 








非 
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因 
通 
信 





|ASYNCO1 5 2 
非同期 通信 を 利用 し た い 


文 = HeW XMLHttpRequest() XMLHttpReques オ ブ ジェ クト を 作成 





衣 ……XMLHttpRequest オ ブ ジ ェクト 





オブ ジェ クト 





XMLHttDRequest は HTTP プ ロト コル を 使っ て サー バー と 通信 し 、 テ キス ト 形 式 や XML 形 
式 の デー タ を 送受 信 す る オブ ジェ クト で す 。 サ ー バ ー と 非同期 に 通信 を 行え る こと か ら 、 
Ajax( ペ ー ジ を 須 移 する こと な く 、 動 的 に ペー ジ の 一 部 を 書き 換え る こと が 可能 な 技術 ) を 実 
現す る た め の 技 術 の 1 つ に な っ て いま す 。 

な お 、Internet Explorer 7 より 前 の バー ジョ ン で は XMLHttpRequest オ ブ ジ ェクト に 対応 
し て いま せん 。 代 わり に ActiveX で XMLHttpRequest と 同等 の 機能 (XMLHTTP オ ブ ジ ェクト ) 
が 提供 され て お り 、 次 の よう な 書式 で オブ ジェ クト を 生成 し ます 。 


IE6 の 場合 文 三 ActiveXObject("Msxml2.XMLHTTP'") 
( 衣 ……XMLHTTP オ ブ ジ ェクト ) 


生成 する オブ ジェ クト の 種類 を 判断 する に は 、 ま ず new ス テー トメ ント (p.039) を 使っ て 
XMLHttpRequest オ ブ ジ ェクト を 生成 し て みて 、 正 し く 生 成 で きる か どう か て で 判断 する 手法 
が よく 用 いら れ ま す 。 


X77/777 の = new XMLHttpRequest(): 
XMLHttpRequest オブ ジェ クト を 作成 し ます 。 


7 の p = new ActiveXObject("Msxml2.XMLHTTP"): 
XMLHTTP オブ ジェ クト を 生成 し ます (IE6 の 場合 )。 





と ブラ ウザ 対応 表 IE10 1 | Fx Chrome Safari Opera iOS6 Android 
〇 〇 〇 〇 〇 〇 〇 〇 (⑳ 
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|ASYNC02 = = 225 還 還 還 還 還 還 還 還 還 還 
サー バー へ の リク エス ト を 送信 し た い 


太 .0Den( 多 , ^, @, 回, マヤ ) リウ エス ト を 初 化 
文 .send( 六 ) リク エス ト を 送信 





衣 ……XMLHttpRequest オ ブ ジ ェクト …… ユー ザー 名 【 省 略 可 】 
ぐる ……HTTP メ ソ ッ ド 名 (P0ST、GET な ど ) … パ スワ ー ド [省略 可 
^ ム …… リ クエ スト 先 URI 広 …… 送 信 デ ー タ 
@…true ま た は false (非同期 :true 同期 

:false) 【 省 略 可 ] 














茹 琶 還 メソ ッ ド 


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーーーーーーーーーーーーーーーーーーーーーーーーーー 


サー バー へ の リク エス ト 送 信 時 の 設定 と リク エス ト の 送信 を 行う メソ ッ ド で す 。 
open メ ソ ッ ド 

HTTP リ クエ スト を 初期 化し 、 デ ー タ の 送信 先 や 送信 方 法 を 設定 し ます 。HTTP メ ソ ッ ド 金 
に は GET、POST、PUT、 HEAD な ど が あり ます が 、 通 常 は GET か POST を 指定 し ます 。 リ ク 
エス ト 先 URIA に は リク エス ト の 送信 先 あ る い は 読み 込み た い フ ァイル 名 を 絶対 URI また は 相 
対 URI で 指定 し ます 。 な お 、 以 上 の 引数 は 必須 で す 。 

同期 通信 か 非同期 通信 か は true( 非 同期 : デフ ォ ル ト ) ま た は false (同期 ) で 指定 し ます 。 ユ 
ー ザ ー 名 と パス ワー ド は 、 認証 に 使用 され る ユー ザー 名 や パス ワー ド の 文字 列 で す 。 

この メソ ッ ド を 設定 し た あと に send メ ソ ッ ド で リク エス ト を サー バー に 送信 し ます 。 
send メ ソ ッ ド 

サー バー に リク エス ト を 送信 し ます 。open メ ソ ッ ド の HTTP メ ソ ッ ド が POST の 場合 は 引数 
に 送信 する デー タ を 指定 で きま す が 、GET の 場合 は 引数 に null を 指定 し ます 。 


xp.open("GET""/cgi-bin/dictionarycgi?"): 


x7/ カ が の .send(nulU): 
GET メ ソ ッ ド を 利用 し た 非同期 の HTTP リ クエ スト を 設定 し 、 送 信 し ます 。 








ぁ p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O 〇 O 〇 〇 〇 O 〇 
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SE 議 議 詳 還 語 アー ソ ギ わ ね わ わ ね ぴぃ 『 ぱ べべ 0 
デー タ を 受信 し た い 


文 .resDOnseText テキ スト デー タ と し て 取得 し た レス ポン ス を 参照 
文 。resDOnseXML XML オブ ジェ クト と し て 取得 し た レス ポン ス を 参照 





衣 ……XMLHttDRequest オ ブ ジ ェクト 


運 箇 惨 本 導 





プロ パテ ィ 





HTTP リ クエ スト に 対す る レス ポン ス 本 体 を 表す プロ パテ ィ で す 。 


responseText プ ロ パ ティ 
』 HTTP リ クエ スト に 対す る レス ポン ス を テキ スト 形式 で 取得 し ます 


esponseXML プ ロ パ ティ 
HTTP リ クエ スト に 対す る レス ポン ス を XML 形式 で 取得 し ます 。 取 得 し た XML デー タ は 、 
DOM の プロ パテ ィ や メソ ッ ド を 使っ て 処理 で きま す 。 


alert(x7/ 太 太 p.responseText): 





非同期 の HTTP リ クエ スト に 対し 、 テ キス ト 形 式 で 取得 し た デー タ を ダイ アロ グ に 表示 し ます 。 





X77/ の ga = x/7/ 記 7 の .respDOnseXML: 
非同期 の HTTP リ クエ スト に 対し 、XML 形 式 で 取得 し た デー タ を 変数 xmlIData に 代入 し ます 。 

















ょ プラ ウザ 対応 表 vIE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 
〇 O 9 〇 O 〇 【⑱ 0) 2 (@】 〇 O 


| 参照 サー バー へ の リク エス ト を 送信 し た い ・・・・P334 
1 清信 を 中 閉じ だ だ YOS aiaiuse 95rors で ia P336 
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実行 中 の 非同期 通信 を 中 止 する メソ ッ ド で す 。 し 
x77/ ガ 7.abort(): 
実行 中 の 非同期 通信 を 中 止 し ます 。 
1 アル ルル た 中: 柱 較 | コト リ 1 3:) Fx Chrome Safari Opera iOS6 Android | 非 | 
O O O 〇 ) 〇 O 〇 O O 〇 〇 | 還 
SD 叶 2EDR > DuP | 通 
| 参 昭和 ー ザ RBHrhyINE 言 


ASYNC.04 | 335 





RNN 


通信 の 状態 を 調べ た い 


太 .readVStat 男 和 の 通信 状態 を 参照 
文 。Status ステ ー タ スコ ー ド を 参照 
文 。StatUlSTeXt 。 ステ ー タ ステ キス ト を 参照 


友 ……XMLHttpRequest オ ブ ジ ェクト 











プロ パテ ィ 





サー バー と の 通信 の 状態 を チェック する プロ パテ ィ で す 。 


| readyState プ ロ パ ティ 
現在 の リク エス ト 処 理 の 状態 を 示し ます 。 戻り 値 は 下記 の 整数 の いずれ か に な り ま す 。 


uninitialized ( 未 初期 化 ) open() が まだ 呼び 出さ れ て いな い 
| loading (読み 込み 中 ) ”。 open0 は 呼ば れ た が send() が まだ 呼び 出さ れ て いな い 。。 ! 
PET loaded (読み 込み 済み ) 上 |5end0 は 時 れ た か 、 まだ ステ ー タ ス や ヘッ タ が な い 
interactive (処理 中 ”"” テー デー タ の 部 を 受け 取っ た = 。 
complete 完了) 。  : 0 1 


status プ ロ パ ティ statusText プ ロ パ ティ 
status プ ロ パ ティ は HTTP ス テー タス コー ド ( リ クエ スト 結果 を 示し ます ) を 、statusText プ 
ロ パ ティ は コー ド に 対応 する ステ ー タ ステ キス ト を 返し ます 。 主 な 値 は 下 表 の 通り で す 。 


ステ ー タ スコ ー ド ! ステ ー タ ステ キス ト  ! 意 味 
リク エス トト に 成功 


authorixed ' 権限 が な い (ユー ザ 認 証 が 必要 で 認証 に 失敗 し た と き な ど ) 
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if((x7/ カ 7p.readyState == 4)&&(x77/7 好 p.Status == 200)){ 


alert("0K"): 


すべ て の デー タ の 読み 込み が 正常 に 完了 し た ら 「OK」 と いう ダイ アロ グ を 表示 し ます 。 
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SS ゾ パ ハハ ぴ べべ 


通信 状態 の 変化 に 対す る 処理 を 
指定 し た い 


文 .0nreadystatechange = 多 





娘 ……XMLHttpRequest オ ブ ジ ェクト 
る …… イ ベン ト 発 生 時 の 興 理 





プロ パテ ィ 





サー バー と の 通信 の 状態 (readyState プ ロバ ティ) が 変化 する と onreadystatechange プ ロ 
パテ ィ が 呼び 出さ れ ま す 。onreadystatechange プ ロ パ ティ に は readyState プ ロ パ ティ の 変 
化 に 対応 する 処理 (イベ ント ハン ドラ ) を 指定 し ます 。 


X77/77 が の .onreadystatechange = 万 MC: 
通信 の 状態 が 変化 し た ら 関数 myFunc を 呼び 出し ます 。 














ょ ブラ ウザ 対応 表 IE10 IE9 13:1 Fx Chrome Safari Opera iOS6 Android 
の 0 6 9 らら は 8 5 bp 


| 通信 の 状態 を 調べ た い ・…・…ーーーーーー・P337 
呈 参 【SAMPLE】 非同期 通信 と 同期 通信 ・・ ・・・・- -・P341 
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| ASYNC07 =⑤ 。 2280 還 還 還 還 還 還 
レス ポン ス ヘ ッ タ 情報 を 取得 し た い 


@ = .detAILReSDOnseHeaders ( ) すべ の レス ポン ス ヘッ タ を 人 
⑯ = 文 .detResDOnseHeader($) レフ ボ ンス ヘ ッ タ を 取得 





@…… レ スポ ンス ヘッ ダ の 情報 
大 ……XMLHttpRequest オ ブ ジ ェクト 
多 取得 する レス ポン ス ヘ ッ ダ 名 





メソ ッ ド 





HTTP で サー バー か ら 送 信 さ れる ヘッ ダ ( レ スポ ンス ヘッ タダ ) の 情報 を 取得 する メソ ッ ド で す 。 


getAllResponseHeaders メ ソ ッ ド 
レス ポン ス ヘ ッ ダ の すべ て の 情報 を 文字 列 で 返し ます 。 


getResponseHeader メ ソ ッ ド 
レス ポン ス ヘ ッ ダ の うち 、 金 で 指定 し た 値 を 文字 列 で 返し ます 。 


alert(x7/7 が p.getAlLResponseHeader() ): 
レス ポン ス ヘ ッ ダ の すべ て の 情報 を ダイ アロ グ に 表示 し ます 。 


/eagerIg//e = x77/77p.getResponseHeader("Content-TVpe"): 
レス ポン ス ヘ ッ ダ の Content-Type を 変数 headerValue に 代入 し ます 。 











p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 〇 9) 〇 O 6) 〇 O O O 


リク エス ト ヘ ッ ダ を 設定 し た い P340 
中 参上 2 
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= 


と 計 で 区 対 民 弟 丈 交 マグ ざ 半 ざ 





、 と で 刈 避 対 帆 信 の uo 半生 民 材 ③ 映 半 画 





リク エス ト ヘ ッ タ を 設定 し た い 


文 .setRequestHeader($,^) 














円 ……XMLHttpRequest オ ブ ジ ェクト 
期 多 設定 し た い ヘ ッ ダ 名 
ム … 設 定 し た い ヘッ ダ の 値 

メソ ッ ド 








HTTP で サー バー へ 送信 する ヘッ ダ ( リ クエ スト ヘッ ダ ) を 設定 する メソ ッ ド で す 。 引数 で 指 
定 し た ヘッ タダ 名 と 値 を リク エス ト に 追加 し ます 。 


x7777 が の .setRequestHeader("Content-Type","application/x-www-form- 


urlencoded: charset=UTF-8"): 
Content-Type を 設定 し ます 。 





ょ ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 


1 か の き ン / し メカ 


レス ポン ス ヘ ッ ダ 情報 を 取得 し た い ・・・・ *B339 
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ASYNC.SAMPLE-01 


に 0 
非同期 通信 と 同期 通信 | 

非同期 通信 と 同期 通信 の サン プル で す 。 この サン ブル で は 、[ 同 期 ] (同期 通信 )、 ま た は [ 非 同 
期 ] (非同期 通信 ) ボ タン が クリ ッ ク さ れる と 、 サ ー バ ー 側 で 3 秒間 待機 し ます 。 そ の 間 に 通 信 
中 で ある こと を 画面 上 に 表示 し 、 通 信 が 終了 する と 警告 ダイ アロ グ を 表示 し ます 。 非同期 通信 
で は サー バー と の 通信 中 も プロ グラ ム が 停止 する こと な く 他 の 処理 を 実行 で きる の で 、 サ ー バ 
ー と の 通信 中 に 通信 中 で ある こと を 画面 に 表示 し ます が 、 同 期 通信 で は 通信 が 終了 する まで 他 
に 処理 を 実行 で き な い の で 、 表 示し ませ ん 。 

ボタ ン が クリ ッ ク さ れる と sendAsync 関 数 を 呼び 出し ます 。[ 同 期 ] ボ タン の 場合 は true、[ 非 
同期 ] ボ タン の 場合 は false を 引数 と し て 渡し ます 。 こ の 関数 の 中 で sendingMSG 関 数 と 
sendRequest 関 数 を 呼び 出し て いま す 。 

sendingMSG 関 数 は 非同期 通信 中 に 画面 に 通信 中 の 表示 を 出す た め の タ イマ ー を セッ ト す 
る 関数 で す 。 


Var Os = 0: // 進捗 表示 の 位置 を 格納 する 変数 


var 777e/ = null // タイ マー を 管理 する 変数 





function se7g4sy7c(2sy7c) { // ボ タン クリ ッ ク で 呼び 出さ れる 関数 
document.qetElementById("asy7c").disabled = true: 
se7 の 77g56( り : // 進 捗 を 表示 する タイ マー の 開始 
se7eg/es#("GET", "async.cd1", asy7c, nulL finish): 


} 


// リ クエ スト を 送信 する 処理 
function se7gZegres7(method, uri, asy7c, data, callback) { 
Var x77/7 好 z //XMLHttDRequest オ ブ ジ ェクト の 作成 
ty{ 
x77/7 が の = new XMLHttpRequest(): 
} catch (e) { 
try { 
x77/777 り = new ActiveX0bject("Msxml2.XMLHTTP"): 
} catch (e) { 
Treturn: 


} 


x77/7 が の .0nloadend = callback: // 遥 信 が 終了 し た と き の 処 理 を 設定 
x7/77p.open(method, uri, asy7c): // リ クエ スト の 設定 
// キ ャ ッシュ 回 避 の ヘッ ダー を 設定 
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X77/77 の .setRequestHeader('Pragma', 'no-cache'): 
x7777 の .SetRequestHeader('Cache-Contro, 'no-cache'): 
X77777P.setRequestHeader('Tf-Modified-Since', new Date(0) .toGMTString()): 
X77/7 が の.send(data): // リ クエ スト を 送信 

} 


function が 77s カ (@) { //sendRequest 関 数 の 第 5 引数 に 渡し て いる (callback) 関 数 
if (e.target.readyState === 4) { //readyState が 4( 通 信 完了 ) の と き 
document.getElementById( "2").innerHTML = "": 
document.qetElementById("asy7c").disabled = false: 
clearInterval(timer): 
alert( "通信 完了 し まし た 。『"): 
} 
} 





function se7g77g56 り { // タ イマ ー を セッ ト す る 関数 
document.getElementById(" の 2").innerHTML = "<p> 通 信 中 ..…</p><canvas 
id='progress' width='100' height='20'></canvas>": 
timer = setInterval( "progress()", 50): // タ イマ ー を セッ | 


} 





function pro97ess(/ { // 通信 中 で ある こと を 画面 上 に 表示 させ る 関数 
Varc = document.getElementById("prog/ess").getContext("2d"): 
if (c) { //Canvas を 使用 し て アニ メー ショ ン を 描画 
c.filUStyle = "white": 
c.fillRect(0, 0, c.canvas.width, c.canvas.height):// 音 景 を 塗り つぶ す 
c.fiLUStyle = "green": 
c.filLRect(pos, 0, c.canvas.width, c.canvas.height):// 縁 の バー を 措 画 
の s =/ の 5 + (Cc.canvas.width / 4): / バ ー の 位置 を 移動 
f (os > c.canvas.width) { // 右 端 を 越え た ら 左 端 か ら 
の 5S = C.Canvas.Width * -1: 


} 
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※ レ イア ウト は 外部 CSS で 指定 し て いま す 


<bodV> 
<form action=""> 
<div id=" の 7"> 
<b> サ ー バ ー 側 で 3 秒 停止 させ ます </b> 
<input type="button" id="sy7c" Value=" 同 期 " 
onclick="se7g4sy7c( ね /5e リ " /> 
<input type="button" id="asy7c" Value=" 非 同期 " 
onclick="se7g4sy7c( か ge /> 
</div> 
<hr /> 
<div id=" の 2"> 
</div> 
</form> 
| body> 


ys 剛 識 


画 融 甘 司 (Y 面 











所 C:\tools\perl\bin\perl 





sleep 3 | ト 





ここ で は sendReqest 関 数 に つい て 説明 し まし よう 。 


①5 つ の 引数 を 受け 取っ て いま す 。 
第 1 引 数 method 送信 方 法 (GET や POST な ど ) 
第 28| 数 uri 送信 先 フ ァイル 名 
第 3 引数 async 非同期 通信 な ら true、 同 期 通信 な ら false 
第 4 引数 data 送信 先 へ 渡す デー タ 
第 58 数 callback 通信 終了 時 に 呼び 出す コー ル バ ッ ク 関 数 


⑧XMLHttpRequest オ ブ ジ ェクト xmlhttp を 作成 し ます 。 
XMLHttpRequestk オ ブ ジ ェクト は new ス テー トメ ント (P.037) を 使用 し て 作成 し ます が 、 
Internet Explorer 6 以前 の ブラ ウザ の 場合 は XMLHttpRequest で は な く ActiveXObject を 
使用 し ます 。 
Internet Explorer 6 ActiveXObject("Msxml2.XMLHTTP') | 


⑧XMLHttpRequest オ ブ ジ ェクト xmlhttp の loadend イ ベン ト に 引数 で 受け 取っ た コー ル バ 
ッ ク 関 数 を 設定 し ます 。 この イベ ント は 成功 失敗 に 関わ ら ず 通信 が 終了 し た と き に 発生 し ま 
す 。 関数 の 中 で 、 通 信 が 成功 し た こと を readyState プ ロ パ ティ で 確認 し て いま す 。 


面 培 選 可 半 ] 


④open メ ソ ッ ド を 呼び 出し ます 。 こ の メソ ッ ド に は 引数 と し て ① で 受け 取っ た method、uri、 
async を 渡し ます 。 IE で キャ ッシュ され る の を 防ぐ た め HTTP ヘ ッ ダ ー を 設定 し て いま す 。 
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⑤send メ ソ ッ ド を 呼び 出し ます 。 こ の メソ ッ ド に は 引数 と し て ① で 受け 取っ た data を 渡し ま 
す 。 こ の サン プル で は デー タ の 転送 は 必要 な い の で null を 渡し て いま す 。 


通信 が 終了 する と コー ル バ ッ ク 関 数 に 設定 し た finish 関 数 を 呼び 出し ます 。 こ の 関数 は 
sendingMSG 関 数 で セッ ト し た タイ マー を 解除 、 通 信 中 の 表示 を 削除 し て 、 ダ イア ログ を 表 
示し ます 。 

※ 同 期 通信 の 場合 は 通信 が 完了 する まで プロ グラ ム が 停止 する の で 、sendingMSG 関 数 の 処 

理 内 容 が 実行 され な いま ま finish 関 数 が 呼ば れ ま す 。 そ の た め 画 面 に 何 も 表 示し ませ ん 。 










国 RMma 
サー バー 側 で 3 秒 停止 させ ます | 同期 | 大 司 其 N 



















[非同期 ] ボ タン を クリ ッ ク し た 際 は サー バー と の 通信 中 で も プロ グラ ム が 停止 する こと な く 他 の 処理 
を 実行 で きま す 


トコ 電 有 期 信 
リー パー 側 * 秒 人 上 させ ます 








[同期 ] ボ タン を クリ ッ ク し た 際 は 通信 が 終了 する まで 他 に 処理 を 実行 で きま せん 
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| 
諾 ニス 























ーー = 
通信 が 終了 する と 警告 ダイ アロ グ が 表示 され ます 


XMLHttpRequest オブ ジェ クト 
open メソ ッ ド 
send メソ ッ ド 


P333 onreadystatechange プロ パテ ィ 






・・ P334 readyState プロ パテ ィ ・・・…・ 
P334 
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本 考 可 (Y 曽 障 可 半 





Canvas を 利用 し た い 


文 = .getContext(^) 描画 コン テキ スト の 取得 





衣 ……Canvas 要 素 へ の 描画 を 担当 する オブ ジェ クト (コン テキ スト ) 
例 … 描 画す る Canvas 要 素 へ の 参照 
る ……Canvas へ の 描画 方 法 の 指定 ("2d" も し く は "webgU') 





メソ ッ ド 





HTML5 の Canvas 要 素 に 描画 する に は 、 描 画 方 法 ご と に 用 意 さ れ た 、「 コ ン テ キ スト 」 と いう 
オブ ジェ クト を 取得 し 、 こ の オブ ジェ クト の メソ ッ ド を 使っ て 描画 を 行い ます 。 


ヽ 山 x(r 補 図 


コン テキ スト に は 、 現在 の と ころ 二 次 元 の 図形 を 描く 「2d」 と OpenGL 技 術 を 利用 し て 3D 描 
| 画 を 行う 「webgl」 が 存在 し ます 。 た だ し 、WebGL コ ン テ キ スト は 利用 で きる 環境 の 条件 が 厳 
| し く 、 内 容 も 非常 に 複雑 で す の で 、 本 書 で は 2D コ ン テ キ スト の み 扱 いま す 。 


<canvas id="77yCg7rgs" width="500" height="500"></canvas> 
| 描画 の 対象 と な る Canvas 要 素 を HTML 内 に 配置 し ます 。 


Var 77 ル Cg7Vgs = document.getElementById( "77yCg7gs"): 
Canvas 要 素 へ の 参照 を 取得 し ます 。 


Var co77exf = 77 ル Cg7Vgs.etContext("2d"): 
2D コ ン テ キ スト を 取得 し ます 。 








ーーー ゴ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 O 〇 O メ 〇 〇 O 〇 〇 〇 O 
上 参照 四 朋 形 を 描画 し た い ーーー ドー P347 画像 を 表示 ・ 操 作 し た い ・……ーー P352 
パス を 使っ て 図形 を 描画 し た い P348 文字 列 を 表示 し た い ーーー P356 
パス を 使っ て 特定 の 図形 を 描画 し た い 【SAMPLE】Canvas に 描画 する ・‥…・・・・ P362 
地点 が パス の 中 に ある か を 調べ た い ・・・・-・ P349 
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四角 形 を 描画 し た い 


太 .StrokeRect(, ^ ム , @⑯, 田 )))。。 円形 の 胃 を 導く 
大 .fillRect($, ^, @, 男 ) 四 骨 形 を 所 い て 塗り つぶ す 
大 .clearRect(, ^ ム , @, 男 ) 四則 形 の 領域 骨 明 に くり ぬく 





……2D コ ン テ キス ト 

る … 四 角形 の 左上 の 点 の X 座 標 (ビク セル ) 

ム ……: 四 角形 の 左上 の 点 の Y 座 標 (ビク セル ) 
ー…… 四 角形 の 幅 ( ビ クセ ル ) 

還 … 四 角形 の 高 さ (ピクセル) 








茹 后 』 メソ ッ ド 





Canvas に 四角 形 の 線 を 描く に は strokeRect メ ソ ッ ド を 、 中 身 を 塗り つぶ し た 四角 形 を 描き 
た いと き は 、fillRect メ ソ ッ ド を 使用 し ます 。 


塗り つぶ し 色 や 線 の 太 さ な どの 描画 スタ イル は 、 描 画 時 点 で の コン テキ スト 文 の 状態 (名 属 
性 値 ) に 従い ます (p.350 参 照 )。 


四角 形 の 形 に 描画 を クリ ア し た いと き は 、clearRect メ ソ ッ ド を 使用 し ます 。 指定 し た 領域 
が 透明 に な る た め 、 外 見 上 、 四 角形 に くり ぬい た よう に な り ま す 。 


confexf。filURect(10, 10, 100, 100): 
1 辺 100 ピ クセ ル の 正方 形 を (10. 10) の 位置 に 描き ます 。 








Column Canvas 上 で の 座標 


Canvas 上 で の 座標 は 、 左 上 隅 の 点 が (0. 0) で 、 右 方 向 と 下方 向 が プラ ス の 方 向 で す 。 た と えば 
Canvas の 右 下 隅 の 座標 は 、(Canvas の 幅 , Canvas の 高 さ ) に な り ま す (単位 : ピク セル ) 。 











p ブラ ウザ 対応 表 IE10 1 3:】 Fx Chrome Safari Opera iOS6 Android 
O O メ O 〇 O O 〇 O O 
| 参照 】 線 や 塗り つぶ し の 色 を 指定 し た い ・‥・・・・ ・: P350 透明 度 を 指定 し た い プ 影 を 付け た い ・・・・・・ P355 
デン グラ デー ショ ン を 設定 し た い ・…・ーー・ P351 【SAMPLE】Canvas に 描画 する P362 
図形 を 変形 させ た い ーー ドー P353 
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パス を 使っ て 図形 を 描画 し た い 


文 .beginPath () バス を クリ ア し て 新しい 図形 を 開始 

文 .closePath( 終点 と 起点 を 結ん で パス を 閉じ る 

文 .moveTo ( X 座 標 , Y 座 標 ) 巡 の om ま で 

文 .HineTo ( X 座 標 , Y 座標 ) ) の js か 指定 の 恋 ま で バス を 下線 で 引く 
文 .fiL() バス を 閉じ て 内 部 を 塗り つぶ し て 描 

文 .Stroke () バス を 実際 に 線 と し て 描画 


……2D コ ン テ キス ト 








メソ ッ ド 





複雑 な 図形 を 描く に は パス ( 点 を つなぐ 経路 ) を 作成 し ます 。moveTo() メ ソ ッ ド で 指定 の 点 
へ 移動 し 、lineTo() で 指定 の 点 ま で 線 を 引き ます 。 


宙 0 メ ソ ッ ド (塗り つぶ し あり ) ま た は stroke() メ ソ ッ ド (塗り つぶ し な し ) で 作成 し た パス が 
描画 され ます 。fl() メ ソ ッ ド で は 、 パ ス は 自動 的 に 閉じ られ ます 。 

作成 し た パス を クリ ア す る に は 、beginPath() メ ソ ッ ド を 呼び ます 。closePath() メ ソ ッ ド 
は 、 パ ス の 終点 と 起点 を 結ん で 図形 を 閉じ る 場合 に 使い ます 。 


co7zex た beginPath(): // パス の 初期 化 
co77ex た .moveTo(100, 100): // 起点 を 設定 


co7fex た iineTo(100, 200): // 指定 の 点 まで 線 を 引く 
c の 77ex.Stroke (): // 塗り つぶ し な し で 措 画 
(100.100) か ら (100.200) ま で の 直線 を バス を 使っ て 引い て いま す 。 








ブラ ウザ 対応 表 IE10 IE9 3:】 Fx Chrome Safari Opera iOS6 Android 





〇 O メ O 〇 〇 〇 O 〇 O り 
| 3 照 線 や 塗り つぶ し の 色 を 指定 し た い ・・・・ P350 透明 度 を 指定 し た い 〆 影 を 付け た い ・・・・・・P355 
ジン グラ デー ショ ン を 設定 し た い ・- ・「P351 【SAMPLE】Canvas に 描画 する ・‥‥・・・・・・P362 





図形 を 変形 させ た い り cixws P353 
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ーーc 


が il【e ド 3」/|p) た 0 


パス を 使っ て 特定 の 図形 を 描画 し た い / 
地点 が パス の 中 に ある か を 調べ た い 


炎 .arC( X 座標, Y 護 標 , 半径 , $, 4 [, @] ) 性 Be 
X.reCt( X 座 標 , 座標 , 幅 , 高 さ ) / に 和信 
isPointInPath( X 座 標 , 座標 ) 上 が バス の 中 に ある か どう か を 把 す 


……2D コ ン テ キ スト 

ぐる … 円 弧 の 開始 角 (単位 : ラ ジア ン ) 

4 ム … 円 弧 の 終了 角 ( 単 位 : ラ ジア ン ) 

@… 措 画 を 反 時 計 回 り に する か の 指定 (省略 可能 。 既定 値 は alse) 











馬 皇 還 メソ ッ ド 





arc メ ソ ッ ド を 使う と 、 パ ス に 円 また は 円 の 一 部 が 追加 され ます 。 最初 の 3 つの 引数 で 、 追 
加 す る 円 の 中 心 点 と 半径 を 指定 し ます 。 次 の 引数 で 、 開 始 角 多 と 終了 角 人 4 を 指定 し ます 。 


開始 角 多 に 対応 する 円 周 上 の 点 が 円 弧 の 起点 、 終 了 角 人 ム の 点 が 終点 で す 。 角 度 は 時 計 で いう 
3 時 の 位置 を 0 ラジ アン と し て 数 えま す 。 起点 か ら 終点 まで 、 既 定 で は 時 計 和 回り に 、 最 後 の 引 
数 借 が true な ら 反 時 計 回 り に 、 円 周 上 を 切り 取っ た 部 分 が 、 パ ス に 追加 され ます 。 


rect メ ソ ッ ド を 使う と 、 パ ス に 四角 形 が 追加 され ます 。 追 加 す る 四角 形 の 左上 の 角 の 座標 と 、 


幅 、 高 さ を 指定 し ます 。 直前 の 終点 か ら は 線 が 引か れず 、 左 上 の 角 が 終点 に な り ま す 。 


点 が パス が 囲ん で いる 領域 の 中 に ある か どう か 知る に は 、isPointInPath メ ソ ッ ド を 使用 し 
ます 。 中 に あれ ば true を 返し ます 。 こ の と き 、 変形 (p.353 参 照 ) は 考慮 され ませ ん 。 








Column 度数 と ラジ アン 


ラジ アン は 、1 ラ ジア ン の 角 の 作る 弧 の 長 さ が 半径 と 等 し く な る よう に 決め られ た 単位 で 、360 
度 が 2r ラ ジア ン で す 。 ラ ジア ン へ は 「 度 数 * ath.PI / 180」 の 式 で 変換 可能 で す 。 














p ブラ ウザ 対応 表 IE10 1 13:) Fx Chrome Safari Opera iOS6 Android 
O O 3 〇 O O O O O 〇 O 
l 照 線 や 塗り つぶ し の 色 を 指定 し た い ・・・・・- ・・・・P350 透明 度 を 指定 し た い / 影 を 付け た い ・・…・・・・ P355 
ネイ グラ デー ショ ン を 設定 し た い ・・・…・・ P351 【SAMPLE】Canvas に 描画 する ・・・‥・・・・・・ P362 
図形 を 変形 させ た い ーー P353 
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線 や 塗り つぶ し の 色 を 指定 し た い 


文 .fiIStyle = 例 塗り つぶ し の スタ イル を 指定 
太 .StrokeStVle = 人 の スタ イル を 指定 

文 。ineWidth = 人 迷 の 幅 を 指定 

文 。SaVe ( ) コン テキ スト 状態 の 保存 


文 。restore () コン テキ スト 状態 の 復元 





天 ……2D コ ン テ キ スト 
る … 措 画 スタ イル ( 色 、 グ ラ デ ー シ ョ ン ま た は パタ ー ン ) 
ム …… 幅 (単位 : ピ ビク セル) 





プロ パテ ィ (filStyle、strokeStyle、lineWidth) 
メソ ッ ド (save、restore) 





描画 の 際 の 共通 設定 は 、 そ の 時 点 で の コン テキ スト の 状態 ( 各 属 性 値 ) に 従い ます 。 

lineWidth プ ロ パ ティ で は 、 措 画す る 線 の 幅 を ピク セル で 指定 し ます 。 

flIStyle プ ロ パ ティ で は 、 塗 りつ ぶし の スタ イル を 、strokeStyle プ ロ パ ティ で は 線 の スタ イ 
ル を 指定 し ます 。 ス タイ ル に 指定 可能 な の は 、CSS と 同様 の 色 名 や #RRGGBB 形 式 に よる 色 指 
定 の 文字 列 か 、 グ ラ デ ー シ ョ ン や パタ ー ン を 表す オブ ジェ クト (次項 参照 ) で す 。 


関数 呼び 出し の 前 後 な ど 、 コ ン テ キ スト 状態 を 一 旦 退 避 し た り 復 元 し た り し た い 場 合 に は 、 
save メ ソ ッ ド で 内 部 に 状態 を 保存 し 、restore メ ソ ッ ド で 保存 し た 状態 を 復元 し ます 。 


context.filUStyle = "red": 


塗り つぶ し の 色 を 設定 し て いま す 。 











ょ ブラ ウザ 対応 表 IE10 IE9 |) Fx Chrome Safari Opera iOS6 Android 
〇 〇 O メ O 6 〇 ⑳ 〇 O (9) 


| 参照 グラ デー ショ ン を 設定 じたい: ーー・ P351 
ヒネ 透明 度 を 指定 し た い 〆 影 を 付け た い P355 


【SAMPLE】Canvas に 描画 する P362 
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グラ デー ショ ン を 設定 し た い 


論 .CreateLinearGradient($, ^, @, 還 ) 細 少 グラ テー ショ ン 
X.createRadialGradient($, 4, Y, @, 男 。 輝 ) 2 ラテ ーション 
し で 2OGColoGitop( 和 か ら 0 表 た ) クラ テー ショ ン 0B 拓 





廊 ……2D コ ン テ キ スト 

例 … 軸 線 の 起点 の X 座 標 開始 円 の 中 心 の X 座 標 
4…… 軸 線 の 起点 の Y 座 標 開始 円 の 中 心 の Y 座 標 
人 @…… 軸 線 の 終点 の X 座 標 終端 円 の 中 心 の X 座 標 
一 …… 軸 線 の 終点 の Y 座 標 終端 円 の 中 心 の Y 座 標 
… 開 始 円 の 半径 

支 …… 終端 円 の 半径 











茹 旦 』 メソ ッ ド 





線形 グラ デー ショ ン は 、createLinearGradient() メ ソ ッ ド で 作成 し ます 。 色 彩 は 起点 (人 
^) と 終点 ( 念 , 田 ) を 結ぶ 軸線 に 沿っ て 変化 し て いき ます 。 

円 形 グ ラ デ ー シ ョ ン は 、createRadialGradient() メ ソ ッ ド で 作成 し ます 。 色 彩 は 開始 円 の 
円 周 か ら 終端 円 の 円 周 へ と 放射 状 に 変化 し て いき ます 。 
addColorStop メ ソ ッ ド 

上 記 で 作成 し た グラ デー ショ ン の オブ ジェ クト に は 、 ま だ 各 地点 で の 色 が 指定 され て いま せ 
ん 。 オブジェ クト の addColorStop() メ ソ ッ ド で 、 各 地点 の 色 を 指定 し ます 。 起点 か ら の 距離 
は 、 全 体 に 対す る 、0.0 か ら 1.0 の 割合 で 指定 し 、 次 に その 地点 の 色 を 文字 列 で 指定 し ます 。 


var 977 = context.createLinearGradient(0, 0, 100, 100): 
gr の .addColorStop(0, "red"): 


gr の .addColorStop(1, "blue"): 
co77exr.filLStyle = 97 の : 
赤 か ら 青 へ の グラ デー ショ ン を 作成 し て 塗り つぶ し の スタ イル と し て 設定 し て いま す 。 





p ブラ ウザ 対応 表 IE10 1 3:) Fx Chrome Safari Opera iOS6 Android 
O (⑲, メ ⑥) O O O O 0 


l 参照 線 や 塗り つぶ し の 色 を 指定 し た い …・ ) 
ジジ ドー 透明 度 を 指定 し た い / 影 を 付け た し -P 


【SAMPLE】Canvas に 描画 する ・…‥・・・…・ 、 
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画像 を 表示 ・ 操 作 し た い 











X.draWImade($, ^, @[, 自 , マ ] ) 画伯 
| 誠 .draWImade(, 区 , や, AO, 人 全 , 還 や) の 8 のり HL て 

表 …… 2D コ ン テ キ スト AA 切り 出す 領域 の 左上 の X 座 標 ( 元 画像 内 
全 … 画像 オブ ジェ クト の 座標 ) 
全 …… 画像 の 左上 の X 座 標 。 。 ぐ の …… 切り 出す 領域 の 左上 の Y 座 標 ( 元 画像 内 

例 … 画 像 の 左上 の Y 座 標 の 座標 ) 

形 還 …… 画 像 の 描画 時 の 幅 ( 省 略 可能 ) *…… 切 り 出す 領域 の 幅 

2 マヤ 画像 の 描画 時 の 高 さ ( 省 略 可能 ) 。 〇 …… 切り 出す 領域 の 高 さ 

メ 

ァ メソ ッ ド 








画像 を 描画 する に は drawlmage メ ソ ッ ド を 使用 し ます 。 第 1 引数 に は 、 画像 オブ ジェ クト 
全 ((MG 要 素 の 参照 か 、new Image() で 作成 ) を 使用 し ます 。 


1 画像 全体 を 描画 する 場合 に は 、 画 像 オブ ジェ クト の 次 の 2 つの 引数 に 、 画 像 が 描画 され る 位 
置 (^, 念 ) を 指定 し ます 。 こ の 位置 が 画像 の 左上 隅 に な る よう に 描画 され ます 。 画像 を 縮小 撤 
大 する 場合 は 、 次 の 引数 に 、 画 像 の 幅 軒 と 高 さ マ を 指定 し ます 。 


画像 の 一 部 を 切り 出し て 描画 する 場合 は 、 画 像 オブ ジェ クト 金 と 措 画 位置 (人 ム , 念 ) の 間 に 、 
切り 出す 領域 の 指定 が 割り 込み ます 。 ま ず 、 切 り 出す 領域 の 左上 隅 の 位置 ( 広 . べ ) を 元 画像 の 
左上 隅 を 原点 と する 座標 で 指定 し 、 次 に 切り 出す 領域 の 幅 へ と 高 さ 〇 を 指定 し ます 。 そ の 後 、 
切り 出し た 画像 を 描画 する 位置 (4, 念 ) と 幅 田 、 高 さ マ の 指定 が 続き ます 。 


』 サン プル の 記述 と その 描画 結果 も 参照 し て くだ さい 。 


co7fex た .drawImage(77age, 50, 50, 100, 100, 30, 30, 200, 200) 
画像 か ら 一 部 を 切り 取っ て 指定 の 位置 に 描画 し て いま す 。 





p ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 


〇 (人) ※ 〇 〇 〇 〇 


中 三 参 【SAMPLE】 Canvas に 描画 する ……・P362 
人 委 
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図形 を 変形 させ た い 


文 .Scale( 多 , ^) 拡大 
文 .rotate (人 @) 回 
文 .translate( 画 , マ ) 和 動 


transfOrm (成分 3, 成分 D, 成分 (, 成分 0, 成人 6, 成分 f) 。 純 ckemko 
.etTansfOrm (成分 3, 成分 b, 成分 (, 成分 0, 成分 6, 成分 f) 和 に jsgo 錠 


り (od 2D コ ン テ キ スト 

る … 模 方 向 の 拡大 縮小 率 

2 人 sosy 縦 方 向 の 拡大 縮小 率 

@… 回 転 させ る 角度 (単位 : ラジ アン ) 
還 …… 右 方 向 の 移動 距離 (単位 : ピクセル) 
マ …… 下 方 向 の 移動 距離 単位 : ピク セル ) 








芋 メソッド 


Canvas で は 図形 の 変形 は 、 コ ン テ キ スト ・ オ ブ ジ ェクト 文 が 状態 と し て 持っ て いる 、「 ど う 
変換 する か を 決め る ルー ル 」 を 、 描 画 の 際 に その 都度 適用 する 、 と いう 形 を と り ま す 。 こ の 変 
換 ル ー ル の こと を 、「 変 形 マト リッ クス 」 と 呼び ます 。 


変形 の 手順 と し て は 、 変 形 用 の メソ ッ ド を 使っ て 必要 な 変形 を すべ て 変形 マト リッ クス に 追 
加 し て か ら 、stroke メ ソ ッ ド な どの 描画 を 行う メソ ッ ド を 呼び 出し ます 。 追 加 さ れ た 各 変 形 
は 、 描 画 時 に は 、 追 加 さ れ た 順番 で 、 変 換 結 果 に さら に 変換 を 加え て いく 形 で 適用 され ます 。 


拡大 縮小 の 変形 を 加え る に は 、scale メ ソ ッ ド を 呼び ます 。 横 方 向 の 拡大 率 念 、 縦 方 向 の 拡 
大 率 ム を 引数 に 指定 し ます 。 回 転 の 変形 を 加え る に は 、rotate メ ソ ッ ド を 回 転 角度 を 引数 に し 
て 呼び ます 。 移 動 の 変形 を 加え る に は 、translate メ ソ ッ ド を 、 右 方 向 、 下 方 向 へ の 移動 距離 
を 引数 に し て 呼び ます 。 マ イナ ス 値 を 指定 する と 反対 方 向 の 指定 に な り ま す 。 


変形 マト リッ クス の 現在 の 状態 や 、 可 能 な すべ て の 変形 は 、 数 学 で いう 3X3 の 行列 式 で 表 
すこ と が で きま す 。 そ こ で 、 行列 に よっ て 変形 を 指定 する こと も で きま す 。 


行列 を 指定 し て 、 カ スタ ム な 変形 を 変形 マト リッ クス に 追加 する に は 、transform メ ソ ッ ド 
を 呼び 出し ます 。 追加 で は な く 、 指 定 し た 行列 の 状態 に 変形 マト リッ クス を 初期 化す る に は 
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setTransform メ ソ ッ ド を 呼び 出し ます 。 指定 で きる 行列 は 下記 の 形式 の も の で 、 そ の 各 成 分 
a, b, c, d, e, f の 数 値 を 、 こ の 順番 で 引数 に 指定 し ます 。 


a, C, e 
bf 
0,. 0, 1 


ーーーーーー 


変形 マ て トリ ックス が 上 記 の 時 、 点 (x, y) は 下記 の 計算 に 基づい て (X, y) に 変換 され ます 。 


ゴ X'=aX+CV+G 
V =bx+dy+f 


co77ex た translate(100, 200): 


co77ex た scale (2, 2): 
co77exf.Stroke() 
右 に 100、 下 に 200 移 動 し 、 横 に 2 倍 、 縦 に 2 倍 の 拡大 を し て 描画 し て いま す 。 





形 
二 
る 
イ 
0 








p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
O ⑯) X 〇 O O 〇 O 〇 O 〇 O 
| 照 四角 形 を 描画 し た い ーーー P347 パス を 使っ て 特定 の 図形 を 描画 し た い , 
ー ン で パス を 使っ て 図形 を 描画 し た い P348 地点 が パス の 中 に ある か を 調べ た い ・ P349 
【SAMPLE】Canvas に 描画 する ・…・…・…・ P362 
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透明 度 を 指定 し た い / 影 を 付け た い 


文 .dlobalAlpha = 透明 度 を 指定 

文 .shadowBlur = @ 影 の ほか し を 指定 
大.ShadowOffsetX = 面 ) X 電 方 向 に 影 を 付け る 
文 .shadowOffsetY = マ Y 較 方 向 に 彫 を つけ る 
文 .shadowColor = 区 叉 の 色 を 指定 


衣 ……2D コ ン テ キ スト 

全 … 透 明度 (0.0 か ら 1.0) 

人 @…… 影 の ぼかし レベ ル の 数 値 
圏 … 影 の X 軸 方 向 の 距離 
ヤマ: 影 の Y 軸 方 向 の 距離 

広 …… 影 の 色 指 定 











プロ パテ ィ 





コン テキ スト 状態 の 設定 に よっ つて は 、 そ の 他 の 視覚 的 効果 を 付け 加え る こと が で きま す 。 

描画 の 透明 度 を 指定 する に は 、globalAlpha プ ロ パ ティ に 「0.0]( 透 明 ) か ら 、 「1.0」( 不 透明 ) 
の 間 の 数 値 を 指定 し ます 。 既 定 値 は 「1.0」( 不 透明 ) で す 。 

影 の 色 は shadowColor プ ロ パ ティ に 指定 し ます 。 本 体 か ら 影 を と それ だ けず らし て 表示 する 
か は 、shadowOffsetX プ ロ パ ティ と shadowOffsetY プ ロ パ ティ に それ ぞ れ X 軸 方 向 の 距離 、 
Y 軸 方 向 の 距離 を 指定 し ます 。 影 を 洪 ん だ よう に ぽ ぼかす に は 、shadowBlur プ ロ パ ティ に 0O 以 
上 の 数 値 を 指定 し ます 。 数 値 が 大 きい ほど ぼかし 効果 が 大 きく な り ま す 。 


context.qglobalAlpha = 0.5: 


context.flL() 
透明 度 0.5 で 描画 を 行っ て いま す 。 





> ブラ ウザ 対応 表 IE10 13:) 1 は:1 Fx Chrome Safari Opera iOS6 Android 
〇 〇 メ 〇 〇 〇 O O (⑳⑱) 〇 


線 や 塗り つぶ し の 色 を 指定 し た い ・・ 
| 参照 】 グラ デー ショ ン を 設定 し た い 


【SAMPLE】Canvas に 描画 する - ] 
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文字 列 を 表示 し た い 


文 .StrokeText($, ^ ム , ⑯ [, 圏 ] ) * 只 で 反 
文 .fillText($, ^, ⑯ [, 圏 ] ) > 導 還 し て まり つぶ す 
〒 = 大 .measureText( 久 ) 文字 列 の 描画 情報 を 取得 


eo 2D コ ン テ キ スト 

$ 描画 する 文字 列 

^……X 座 標 (単位 : ピク セル ) 

@……Y 座 標 ( 単 位 : ピク セル ) 

圏 …… 最 大 幅 ( 単 位 : ピク セル ) 

… 幅 な どの 描画 情報 を 持つ TextMetrics オ ブ ジ ェクト 











メソ ッ ド 
| 


文字 列 を 描画 する に は 、strokeText メ ソ ッ ド か fillText メ ソ ッ ド を 使用 し ます 。 strokeText 
メソ ッ ド で は 輪郭 線 の み の 描 画 に な り ま す 。 引数 は 共通 で 、 描 画す る 文字 列 に 続け て 描画 位置 
を 座標 で 指定 し ます 。 最後 の 引数 は 最大 幅 で 、 こ れ を は み 出 し た 部 分 は 描画 され ませ ん 。 


フォ ント 名 や サイ ズ の 指定 は 、 コ ン テ キ スト 文 の font 属 性 に CSS の font プ ロ パ ティ の 指定 と 
同様 の 指定 を し ます 。 左右 の 寄せ は 、textAlign 属 性 に 、「left」( 左 寄せ )、「right」( 右 寄せ ) 、 
「center」( 中 央 寄せ ) を 指定 し ます 。 同様 に 上 下 の 寄せ は 、textBaseLine 属 性 に 、[top」( 上 寄 
せ ) 、「middle」( 上 下 の 中 央 寄せ ) 、「bottom」( 下 寄せ ) を 指定 し ます 。 


measureText メ ソ ッ ド で 文字 列 を 引数 に し て 呼ぶ と 返さ れる TextMetrics オ ブ ジ ェクト ャ 
に は 、 文 字 列 の 描画 時 の 情報 が 格納 され ます 。 現在 、width 属 性 (文字 幅 ) が 利用 可能 で す 。 


co77ex た .font = "bold 12pt sans-serif": 


co7fex た fillText(" よ うこ そ ", 100, 100): 
(100. 100) の 位置 に 文字 列 を 描画 し て いま す 。 








ょ ブラ ウザ 対応 表 IE10 IE9 1 ゴ :】 Fx Chrome Safari Opera iOS6 Android 
O 〇 メ の 〇 @⑯) 〇 〇 O 


雪 照 【SAMPLE】Canvas に 描画 する ・・‥・・・・・・ P362 
人 衝 必 
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SVG を 操作 し た い 


太 = 金 .qetSVGDocument() SVG フ ァイル 内 の SVG 要 素 を 取得 








本 時 還 メソ ッ ド 





SVG は XML の 一 種 で ある た め 、DOM を 利用 し て 要素 や 属性 を 操作 する こと が で きま す 
(DOM の 操作 に つい て は p.300 参 照 ) 。 


HTML の な か に 直接 SVG 要 素 が 記述 され て いる 場合 は 、 通 常 の DOM 操 作 と 同じ く 、 
document.getElementByld() な ど で SVG 要 素 へ の 参照 を 取得 し 、 必 要 に 応じ て 属性 値 を 設定 
し た り 、 要 素 を 作成 し て 追加 し た りす る こと で SVG 画 像 を 操作 し ます 。 


Var 7ecf = svd.getElementsByTagName( "7/ecf")[0]: 
SVG 要 素 内 の 、 四 角形 を 表す rect 要 素 へ の 参照 を 取得 し ます 。 





た だ し 、SVG の 要素 を 新規 に 作成 する と き は document.createElementNS("http:// 
wWwwWW3.org/2000/svg'.SVG の タグ 名 ) と する 必要 が ある 点 に 注意 し て くだ さい 。 documert. 
createElement() で 作成 し た 要素 は SVG の 要素 と し て は 使用 で きま せん 。 


getSVGDocument メ ソ ッ ド 

object ま た は embed 要 素 で HTML に SVG フ ァイル を 埋め 込ん で いる 場合 に は 、 
getSVGDocument() を 使っ て SVG フ ァイル 内 に ある SVG 要 素 へ の 参照 を 取得 し ます 。SVG フ 
ァイル の 読み 込み が 終わ っ て いる 必要 が ある た め 、onload イ ベン ト 等 を 利用 し て 読み 込み を 
待つ 必要 が あり ます 。 


ょ ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 


0 。 9 炎 の りり 9 @ 届 G 


オブ ジェ クト の 情報 を 取得 し た い ・…・・ P300 
幅 表 め 
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音声 ・ 動 画 の 再生 を 操作 し た い 「 


文 。.DIaV () 再生 の 開始 
論 .Dause( ) 再生 の 人 上 
文 。load () メデ ィ ア (音声 ・ 動 画 フ ァイル ) の 読み 込み 


文 .canPlayType ($ ) を 定 す る 





衣 ……:video 要 素 ま た は audio 要 素 へ の 参照 
る ……MIME タ イブ 








国 馬 メソ ッ ド 





video 要素 と audio 要 素 で の メデ ィ ア の 再生 を 制御 し ます 。API は 2 つの 要素 で 共通 の も の を 
使用 し ます 。 


play メソ ッ ド で メデ ィ ア を 再生 し 、pause メ ソ ッ ド で 再生 を 停止 し ます 。 再生 する メデ ィ 
ア を 動 的 に 変更 し た 際 に は 、 再 生 の 前 に load メ ソ ッ ド で 、 明 示 的 に 読み 込み を 行う 必要 が あ 
り ま す 。 


特定 の MIME タ イプ の メデ ィ ア が 再生 可能 か 判断 する に は 、canPlayType メ ソ ッ ド を 利用 
し ます 。 再生 で き な い と き は 空 文字 が 、 再 生 で きる 可能 性 が 高い と き は 「probably」 が 、 再生 
で きる 可能 性 は ある が 不明 な と き は 「maybe」 が 返さ れ ま す 。 


判定 が 不 確 実 な の は 再生 可否 に は MIME タ イプ 以外 の 条件 も 関係 する か ら で す 。 以下 の よう 
に 、 フ ァイル の コー デック (エン コー ド 方 式 ) を 含め て 引数 に 指定 する こと も で きま す 。 


「video/mp4: codecs="avc1.42E01E, mp4a.40.2"」(mp4 形 式 、 動 画 H.264(AVC1)、 音 声 
AAC LC(MP4A) の 場合 ) 


メデ ィ ア 要素 で は 以下 の よう な イベ ント が 発生 し ます 。 た だ し onXXX 形 式 の イベ ント ハン 


ドラ は 定義 され て いな いた め 、addEventListener メ ソ ッ ド を 使用 する 必要 が あり ます 。 サン 
プル を 参照 くだ さい 。 
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イベ ント ! 内 容 
iemptied ! メデ ィ ア が クリ ア さ れ た 時 





ご で 庶 蒲 RHF 避 固 周 ・ 時 m 


イベ ント ! 内 容 








ivolumechange 
※ メ タデ ー タ に は 有 再生 時 間 の 長 さ な どの 情報 が 含ま れ ま す 。 





(の 7eoE/e7e7 た canPlayType("video/webm") == "の ){ 
output.innerHTML = "webm 形 式 の 動画 は 再生 で きま せん ": 


webm 形 式 の 動画 を 再生 で きる か 判定 し て いま す 。 











と ブラ ウザ 対応 表 IE10 1 IE8 Fx Chrome Safari Opera iOS6 Android 
O 〇 メ O O 9 〇 O 〇 
上 参照 2 音声 ・ 動 画 の 状態 を 取得 し た い P360 
ジ 【SAMPLE】 動 画 を 操作 する P366 
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音声 動画 の 状態 を 取得 し た い 


文 。CurrentSrc 現在 の メデ ィ ア の URIL。 読み 取り 専用 
文 。CurrentTime 現在 の 再生 位置 

文 .duration 再生 時 間 の 長 さ 。 読み 取り 専用 

文 。ended 再生 終了 判定 。 読み 取り 専用 

文 。.muted ミュ ー ト 判定 

文 。DauSed 人 上 判定 。 読 み 取り 専用 

文 .seekinq シー ク 中 判定 。 読み 取り 専用 

文 。volume ボリ ュー ム (0.0-1.0) 








プロ パテ ィ 





video 要 素 ま た は audio 要 素 で の メデ ィ ア の 再生 時 の 状態 を 取得 し ます 。 


currentSrc プ ロバ パテ ィ 
現在 の ロー ド さ れ て いる メデ ィ ア の URL が 格納 され て いま す 。 読み 取り 専用 で す 。 


currentTime プ ロ パ ティ 
現在 の 再生 位置 の 秒 数 を 取得 ・ 設 定 し ます 。 


duration プ ロ パ ティ 
現在 の メデ ィ ア の 全体 の 再生 時 間 が 秒 数 で 格納 され て いま す 。 読み 取り 専用 で す 。 


ended プ ロ パ ティ 
再生 が 終了 し て いれ ば true を 返し ます 。 読み取 り 専 用 で す 。 


muted プ ロ パ ティ 
ミュ ー ト (音声 無効 化 ) 中 で あれ ば true を 返し ます 。 設定 も 可能 で す 。 


Paused プ ロ パ ティ 
再生 が 停止 中 で あれ ば true を 返し ます 。 読み取 り 専用 で す 。 
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seeking プ ロ パ ティ 
再生 位置 を 変更 中 で あれ ば true を 返し ます 。 読み 取り 専用 で す 。 


壮 き 同軸 ・ mn 識 


volume プ ロ パ ティ 
ボリ ュー ム を 0.0~1.0 の 範囲 で 取得 ・ 設 定 し ます 。 
を | 
ここ で 挙げ た も の 以外 に も 、autoplay、controls、loop、preload、src の 各 プ ロ パ ティ が 取 
存在 し 、video ま た は audio タ グ の 同名 の 属性 の 値 を 取得 ・ 設 定 す る こと が 可能 で す 。 ly 
7 
い 


の eo/e/7e7 た .muted = true: 
video 要素 の 再生 で 、 音 声 を 無効 に し て いま す 。 


g777o7e77e7 た CurrentTime = ag の 7oE/e/7e7 た duration / 2: 
audio 要 素 の 再生 位置 を 全体 の 半分 の 位置 に 変更 し て いま す 。 | 











p ブラ ウザ 対応 表 IE10 1 |:】 Fx Chrome Safari Opera iOS6 Android 
〇 O ⑩ メ 〇 〇 O O 〇 O 〇 O 
Il 照 音声 ・ 動 画 の 再生 を 操作 し た い ・‥・・・・・ P358 
7 で 【SAMPLE】 動画 を 操作 する -‥‥・・・…・-・・・ P366 
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GRAPHICS&MEDIA.SAMPLE-01 


Canvas に 描画 する 





Canvas へ の 描画 を 行っ て いま す 。 コ ン テ キ スト を 取得 し た の ち 、 フ ォ ン ト を 指定 し 、 実際 
の 描画 処理 は 関数 に 分 け て いま す 。 Canvas の 枠 線 は CSS で 指定 し て いま す 。 





drawDirect 関 数 
function の gw//ecf(c) { // パス を 使わ ず 直 接 描画 を 行い ます -ーーーーー① 
C.SaVe (): 
c.fiLLStyle = "green": // 塗り つぶ し 色 の 設定 
c.filLRect(100, 100, 100, 100): // 塗り つぶ し の 四角 形 の 描画 


c.StrokeStvle = "blue": // 線 の 色 を 指 宮 
c.globalAlpha = 0.3: // 透明 度 の 変更 
c.strokeRect(50, 50, 100, 200):// 線 で 四角 形 を 描画 
c.globalAlpha = 1: // 透明 度 の 変更 

c.flIStyle = "black": 

c.fillText(" の aw の ecf", 70, 90): // 文字 列 の 描画 
c.restore(): 


ヽ ヾ い Hxrr ぎ 図 


} 


function の awgy/g 妨 (c) { // パス を 使っ つて 描画 を 行い ます ーーーーーー 3 
C.SaVe (): 
c.beginPath(): // パス の 開始 
c.moveTo(250, 200): / 起点 設 
』 c.lineTo(200, 300): // 湖 を 引 : 
| c.lineTo(300, 450): // 療 る 
c.closePath(): // 線 を 閉じ る 
c.StrokeStyle = "red": // 線 の 色 を 変更 
| c.Stroke(): // 線 で 描画 
』 c.fillText(" の awgy/g 娘 ", 250, 250): // 文字 列 の 描画 
c.restore (): 





} 


| function の aw67g7g が 7o7(c) { フラ テー ショ 

| c.savVe(): 

| c.beginPath(): // パス の リセ ッ ト 

| c.arc(300, 100, 80, 0, Math.PI * 2): // パス に 円 の 追加 
線形 グラ デー ショ ン 作 成 

Var 9 の 7 の = ccreateLinearGradient(200, 100, 400, 100): 

| g の の .addColorStop(0, "white"): // 起点 の 色 を 白 に 設定 
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gr の .addColorStop(1, "black"): // 終点 の 色 を 黒 に 設定 C 
c.filIStyle = gy: // グラ デー ショ ン を 塗り つぶ し に d 
c-fll(): // 塗り つぶ し で パス を 描画 
c.fillStyle = "red": a 
c.fillText(" の gw67ggg が 7o7", 300, 50): // 文字 列 の 描画 ES | 
c.restore (): に 
} 描 
画 
function の gw77a7s(c) { // 生 形 を 適用 し ます ] る 
c.SaVe (): | 
c.translate(100, 300): // 移動 の 変形 を 追加 | | 
c.scale(1.5, 1.5): // 1.5 倍 の 拡大 変形 を 追加 | 
c.rotate(45 * Math.PI / 180): // 45 度 の 回 転 変形 を 追加 
c.flUStyle = "blue: 
c.globalAlpha = 0.3: 
c.flLRect(10, 10, 70, 70):// 正方 形 を 描画 
c.filUStyle = "green": 
c.fillText(" の aw7a7s", 10, 5): // 文字 列 の 描画 
c.restore (): 
} 
function の aw/7c7/e (c) { // 国 像 を 指 国 し ます 
Var pc7 = new Imade (): 
7cr.src = "sample_blue.jpg": 
7cf.onload = function() { // 画像 の 読み 館 み を 待つ 
C.SaVe(): 四 
c.drawImaqe(/7c, // 画像 ファ イル を 指定 
250, 250, 100, 100, // 切り 抜く 領域 を 指定 
350, 350, 100, 100): // 描画 先 の 領域 を 指定 
c.fillText(" の aw/7cf7e", 350, 340): // 文字 列 の 描画 
c.restore(): 
function の awS7ago(c) { / 影 を 付け ます 
c.SaVe(): 
c.filStyle = "blue": 
c.shadowColor = "silver": // 影 の 色 指 定 
c.shadowOffsetX = 10: // 影 の 模 の 位置 
c.shadowOffsetY = -10: // 影 の 縦 の 位置 結 
c.shadowBlur = 5: // 影 の 痛み 
c.fUURect(400, 200, 50, 50): 形 | 
cr.fllStyle = "black" > 
c.fillText( "の awS7agow", 350, 190): // 文字 列 の 描画 テ 
c.restore(): イ 
らら 








GRAPHICS&MEDIA.SAMPLE-01 | 363 





形 
と 
る 
に 
イ 
ア 








※ レ イア ウト は CSS で 指定 し て いま す 





<body> 
<CanVas 1d= "77 ル Cg7Vgs "></canVas> 
</bodV> 





① drawDirect 関 数 で は パス を 使わ な い 図形 の 描画 を 行っ て いま す 。 関数 の 最初 で save メ ソ ッ 
ド を 呼び 、 最 後 で restore メ ソ ッ ド を 呼ん で いる の は 、 関 数 内 で 行っ た 状態 変更 を クリ ア す 
る た めで す 。 透明 度 の 変更 と 文字 列 の 描画 も 行っ て いま す 。 


⑧drawByPath 関 数 で は パス を 使っ た 描画 を 行っ て いま す 。 


③drawGradation 関 数 で は 、 パ バス を 利用 し て 円 を 描き 、 そ の 塗り つぶ し と し て 線形 グラ デー 
ショ ン を 指定 し て いま す 。 


④drawTrans 関 数 で は 、 移 動 、 拡 大 、 回 転 の 変形 を 加え て 、 四 角形 を 描画 し て いま す 。 文字 
列 も 一 緒 に 変形 され て いま す 。 


⑤drawPicture 関 数 で は 、 画像 ファ イル を 読み こん で 、 そ の 一 部 を 切り 抜い た も の を 描画 し て 
いま す 。 新た に 画像 オブ ジェ クト を 作る 場合 は 特に 、 画 像 の 読み 込み を 待つ て か ら 描 画す 
る 必要 が ある こと に 注意 し て くだ さい 。 


⑥drawShadow 関 数 で は 影 を 指定 し て 四角 形 を 描画 し て いま す 。 文字 列 に も 影 が 付い て いま 
す 。 


364 | GRAPHICS&MEDIA.SAMPLE-01 










drawDirect 





radation 


drawShadow 


drawByPath 柚 


drawPicture 


















(e 
ト ・ 


| 。。 較 


| awDmrect 





上 E 朋 : 参 関連 メソ ッ ド ・ プ ロ パ ティ ・ 







どの 関数 で 描画 し た も の か を 文字 列 で 表示 し て いま す 


da 
rawShadow 


drawPicture 
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GRAPHICS&MEDIA.SAMPLE-02 


動画 を 操作 する 





video 要素 で 埋め 込ん だ 動画 の 再生 、 停 止 ボ タン と 、 現 在 の 再生 時 点 を 示す スラ イダ ー を 、 

既定 の コン トロ ー ル を 使わ ず に 実装 する サン プル で す 。 現在 の 再生 時 点 の 変更 は 、 再 生 する に 

] つれ て 発生 する timeupdate イ ベン ト で 検知 し 、currentTime プ ロ パ ティ を 使っ て 取得 と 設定 
を 行い ます 。 ス ライ ダー の 値 を 変更 する と 再生 位置 も 変わ り ます 。 





Var レ =nul じ 
window.onload = function() { 
// 必要 な HTML 要 素 へ の 参照 を 取得 


レ = document.qetElementById(" り "): 
Var s777e/ = document.qetElementById("s/77e/"): 
Var の 5/ = document.getElementById( "sp"): 


形 
ど 
る 
に 
イ 





スラ イダ ー の 最大 値 を 再生 時 間 に 設 定 
5777e/.max = r.duration: 
addEventListener("durationchange", function() { 
5777e/.max = r.duration: 


財 }): 


/ 再生 時 点 か ら ス ライ ダー へ の 同期 を 設定 
addEventListener( "timeupdate", function() { 
5777e/.value = .currentTime: 
ーー 一 の sp.innerHTML = Math.ceil(currentTime) + " / " + Math.ceil(duration): 


): 





/ スラ イダ ー か ら 再 生 時 点 へ の 同期 を 設定 
5s779e/.addEventListener("change", function() { 
] currentTime = s/77e/.value: 


): 
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※ レ イア ウト は CSS で 指定 し て いま す 





<body> 
<form> 
<Video 1d=" リ "> 
<source src="sample.webm" type="video/webm"> 
<source src="sample.mp4" type="video/mp4"> 
</video> 
<div> 
<input id="s/77e/" tVpe="range" value="0"> 
<div id="ctlr"> 
<SDan id="disp"></sDan> 
<input onclick="r.play():" type="button" value=" 再 生 " > 
<input onclick="r.pause():" type="button" value=" 停 止 "> 
</div> 
</div> 
</form> 





</body> 


@| 
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L ニニ ニニ ーー ee 


ボタ ン で 動画 の 再生 ・ 停 止 、 シ ー ク バー で 再生 位置 の 指定 が で きま す 
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ト 14/14 | 再生 | 停 正 | 
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円 x デ ィ ア 操作 の サン プル x 葉 時 





を と っ の の 








⑩ web 





台 人 








| 参 照 duration プロ パテ ィ 
ロ CurrentTime プロ パテ ィ ・ 


play メソ ッ ド ・…・ 





ル 


www.Shoeisha.comv ト 





4/ 13 (本) (mi 


0'FDSUse ペン EE2ONGrSc9 が because P358 
P360 
P358 
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ドラ ッ グ & ド ロッ プ で きる よう に し た い _ 


文 .0ndragstart = ドラ ッ グ 開始 時 
4^.ondragenter = ドロ ッ プ 先 要素 へ の 接 前 時 

4.0ndragover = 金 ドロ ッ プ 先 要 素 上 で の 移動 時 
4.ondrop = 金 ドロ ッ プ 計 


@.dataTransfer.setData( 田 , マ ) テー タ の sw 
@.dataTransfer.getData( 田 ) テー タ om 


X…… ド ラッ グ S ドロ ッ プ で 移動 する 要素 
る …- 実 行 する 命令 (関数 や 関数 名 
^…… ド ラッ グ S ドロ ッ プ の 移動 先 の 要素 
@…ー イ ベン ト 3 約 

データ の タイ ブ 

マ …… デ ー タ 








馬 皇 還 イベ ント (ondragstart、ondragenter、ondragover、ondrop) 
メソ ッ ド (setData、getData) 





ドラ ッ グ S&S ドロ ッ プ で は 、 或 る 要素 を 別 の 要素 に 引き 渡す こと で 、 コ ピー、 移 動 、 リ ンク 、 
その 他 の 処理 を 行い ます 。 


要素 を ドラ ッ グ (マウ スカ ー ソ ル 等 で 動か すこ と ) 可 能 に する に は 、 HTML ソ ー ス で 
draggable 属 性 を true に 設定 し ます 。 画像 や 選択 文字 列 な ど は 既定 で ドラ ッ グ 可能 で す 。 


要素 を ドロ ッ プ ( 他 の 要素 を 受け 付け る こと ) 可 能 に する に は 、 仕様 で は ドロ ッ プ 先 の 要素 に 
dropzone 属 性 ( 値 は ドロ ッ プ 時 の 処理 に 応じ て 「copy」「move」「link」 の いずれ か ) を 設定 し ま 
す 。 た だ し 、2013 年 3 月 現在 、dropzone 属 性 を 実装 し て いる ブラ ウザ が な いた め 、 以 下 の 方 
法 で 代替 し ます 。 


ブラ ウザ に よる ドロ ッ プ の 禁止 は 、dragenter イ ベン ト 、dragover イ ベン ト の 既定 の 処理 
で 行わ れ て いま す 。 そ の 為 、 こ の 「 既 定 の イベ ント 処理 ] を キャ ン セ ル す る こと で 、 ド ロッ プ を 
有効 に する こと が で きま す ( コ ラム p.372 及び サン プル p.376 参照 )。 


ドラ ッ グ され た 要素 か ら ド ロッ プ 先 の 要素 へ デー タ を 渡す に は 、DataTransfer オ ブ ジ ェ ク 
ト を 仲立 ち に し ます 。 
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デー タ を 格納 する に は 、dragstart イ ベン ト で [イベ ント 引数 ].dataTransfersetData( 玉 , マ ) 
メソ ッ ド を 呼び 出し ます 。1 つ の タイ プ 画 に つき 、1 つ の デー タマ が 格納 可能 で す 。 既 定 で ド 
ラッ グ 可 能 な 要素 で は 、 あ ら か じ め 適 切な デー タ が 対応 する タイ プ に 格納 され ます 。 


と は CriOreOkdINLs ロ の さ SNI テ 


| 


] 
] 
| 
| 


デー タ の タイ ブ ゴブ 指定 文字 列 画 は 、「text/plain」( 文 字 列 )「text/uri-list」(URL) な どの MIME タ 
イプ で 指定 し ます が 、 古い 仕様 の 「Text」「URL」 も 使用 可能 で 、IE は 「Text」「URL」 に の み 対 応 し 
て いま す 。 











デー タ を 取り 出す に は 、[ イ ベン ト 引 数 ].dataTransfergetData( 置 ) を 適切 な タイ プ 田 を 引 | 
数 に し て 呼び 出し ます 。 


の opEfe77e/7 た .ondragenter = function(eve7 が の { 
eve7 た preventDefault(): 


} 
dragenter イ ベン ト に つい て 、 ド ロッ プ 禁 止 を 解除 し ます 。 


ope77e7 た ondrop = function(eve7 の { 
Var 7g = eve7 た .dataTransfer.getData( "Text"): 





ドラ ッ グ & ド ロップ に よっ て 渡さ れ た 文字 列 を 取得 し ます 。 











ょ ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera ijOS6 Android 
O メ も 3 O O O O メ メ 


| 参照 ブラ ウザ 外 と の ドラ ッ グ S&S ドロップ の や り 取り を し た い ・・ P372 
ピ さ ム 【SAMPLE] ドラ ッ グ & ド ロッ プ で 要素 の 色 を 変え る ・・ P376 





[ 査 薄い へ] 
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ブラ ウザ 外 と ドラ ッ グ ドロ ッ プ の 
_ や り 取 り を し た い 


$ = dataTransferflles[ 参 照 番号 ] トラック kn> フ ak フ ァイル の WW 





玉 …… ド ロッ プ 時 イベ ント の イベ ント 3 数 
ファ イル の 情報 を 表す File オ ブ ジ ェクト 





芽 皇 』 プロ パテ ィ 





要素 が ドロ ッ プ 可能 で あれ ば 、 ブ ラウ ザ 外 か ら ド ラッ グ さ れ た ファ イル や 要素 を 受け 付け る 
こと も 可能 で す 。 こ の 際 、 フ ァイル へ の ペー ジ 裾 移 と いう 既定 の 動作 を 回 避 す る に は 、drop 
イベ ント で 「 既 定 の イベ ント 処理 ] を キャ ン セ ル し ます (コラ ム 参 照 ) 。 


ファ イル の 場合 、DataTransfer オ ブ ジ ェクト の filess プ ロ パ ティ に 、File オ ブ ジ ェクト が 配 
列 形式 で 格納 され ます 。File オ ブ ジ ェクト は ファ イル の 中 身 で は な く 、 属 性 情報 を 格納 し て い 
ます 。 フ ァイル の 中 身 の 取得 に は File API(p.373 参 照 ) を 使用 し ます 。 





Var 7e = eve た dataTransfer.files[0]: 
ドラ ッ グ S&S ド ロップ され た ファ イル を 表す File オ ブ ジ ェクト を 取得 し ます 。 


Var name = file.name: 
ファ イル 名 を 取得 し ます 。 








Column 既定 の イベ ント 処理 の キャ ン セ ル 
ブラ ウザ は 各 イ ベン ト に 対応 し て さま ざま な 処理 を 既定 で 行っ て いま す 。 そ の うち 、 キ ャ ン セ ル 可 
能 な 処理 に つい て は 、 各 イベ ント で [イベ ン ト 処 理 関 数 の 引数 ].preventDefault() を 呼び 出す こと 
で 無効 に する こと が で きま す 。 








ょ ブラ ウザ 対応 表 IE10 1 1 Fx Chrome Safari Opera iOS6 Android 
(⑳) 3 の 〇 〇 〇 〇 X X 
| | ドラ ッ グ & ド ロッ プ で きる よう に し た い ・・・・・P370 【SAMPLE】 ドラ ッ グ & ド ロッ プ で 要素 の 色 を 変え る ・・ P376 
な ファ イル の 属性 を 取得 し た い ・ 2 P373 
ファ イル の 内 容 を 取得 し た い ・ ーー P374 
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ファ イル の 属性 を 取得 し た い 


文 = .files[ 参 照 番 号 ] File オ ブ ジ ェクト の 取得 


文 .hame ファ イル 名 
文 。S1Ze サイ ズ ( 単 位 は バイ ト ) 
文 .tVDe ファ イル の MIME タ イブ 


文 .lastModifiedDate 最終 更新 日 時 (Date オ ブ ジ ェクト ) 


支 ……File オ ブ ジ ェクト 
人 input 要素 また は DataTransfer オ ブ ジ ェクト 

















語 皇 プロ バテ ィ 





HTML5 で は javaScript か ら フ ァイル に アク セス する こと が 可能 に な り ま し た 。 フ ァイル を 
表す File オ ブ ジ ェクト の 取得 に は 、type 属 性 が file の input 要 素 を 使う 方 法 と 、 ド ラッ グ & ドロ 
ッ プ を 使う 方 法 が あり ます 。 


Input 要素 の ファ イル ダイ アロ グ で 選択 する と 、change イ ベン ト が 発生 し 、input 要 素 の 
files 属 性 に File オ ブ ジ ェクト が 配列 形式 で 格納 され ます 。 取 得 の 際 に は 、files[0] の よう に 、 
参照 番号 を 指定 し ます 。 

ドラ ッ グ & ド ロッ プ の 場合 は 、drop イ ベン ト で 、「[ イ ベン ト 引 数 ].dataTransferfiles」 に 、 
同じ よう に File オ ブ ジ ェクト が 格納 され ます (p.372 参 照 )。 

File オ ブ ジ ェクト は 、 フ ァイル 情報 の 取得 の ほか に 、 フ ァイル の 中 身 を 読み 込む 際 の 引数 と 
し て も 使用 し ます 。 


var が /e = inputElement.files[0]: 
Input 要素 か ら File オ ブ ジ ェクト を 取得 し ます 。 


var pe = 7 が /e.type: 
ファ イル の MIME タ イプ を 取得 し ます 。 


ょ ブラ ウザ 対応 表 IE10 IE9 3:】 Chrome Safari Opera iOS6 Android 
〇 3 X KW (O) 〇 〇 〇 〇 


| プラ ウザ 外 と の ドラ ッ グ & ド ロッ プ の や り 取 り を し た い ・・ 
参照 2 ファ イル の 内 容 を 取得 し た い ・・-・-・・ 


【SAMPLE】 フ ァイル の 内 容 を 取得 する 
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4 
人 
ザ 
外 
と [ 
ド 
ラ 
ク 
グ 
S 
ド 
口 
ッ 
ジ 
の 
や 
り 
取 
り 
を 
し 
た 
い 


と ン で 端 周 R 放 調 ③ ご いい 


[ 語 薄 〒 へ ュ J] 














FILE HANDLING.04 


ファ イル の 内 容 を 取得 し た い 「 


娘 .readAsArrayBuffer( ) rcyBuffer オ フジ ェクト と し て 
文 .readAsText ($, ^) 文字 列 と し て 取得 

文 .readAsDataURL( 多 ) Data URI と し て 取得 

文 .abort( ) 読み 込み を 中 上 


文 。resut ファ イル か ら 読 み 込ま れ た デー タ 





衣 ……FileReader オ ブ ジ ェクト 
全 …File オ ブ ジ ェクト 
4^ ム …… 文 字 列 の エン コー ディ ング 








還 E メソ ッ ド 





ファ イル の 中 身 を 読み 込む に は 、FileReader オ ブ ジ ェクト (「new FileReader()」 で 生成 ) を 
使用 し ます 。 な お 、ArrayBuffer と Data URL の 使用 法 に つい て は 、 サ ン ブ ル を 参照 し て くだ 
さい 。 


readAsArrayBuffer メ ソ ッ ド 
ファ イル の 内 容 を 、 型 付き デー タタ 配列 の た め の ArrayBuffer オ ブ ジ ェクト と し て 格納 し ます 。 


readAsText メ ソ ッ ド 
ファ イル の 内 容 を 、 指 定 さ れ た 文字 コー ド (IANA 名 。 省 略 可 ) の テキ スト デー タ と し て 文字 
列 に 格納 し ます 。 


readAsDataURL メ ソ ッ ド 
ファ イル の 内 容 を 、Data URL に 変換 し て 文字 列 に 格納 し ます 。 


吉 メ ソ ッ ド は 読み 込み 処理 の 起動 だ け を 行い 、 読 み 込 み の 完了 を 待た ず に 終了 し ます ( 非 同 
期 )。 バ ッ ク グ ラウ ンド で 読み 込み が 完了 する と 、FileReader オ ブ ジ ェクト の result 属 性 に デ 
ー タ が 格納 され 、load イ ベン ト が 発生 し ます 。 


FileReader オ ブ ジ ェクト の 読み 込み に 関す る イベ ント に は 下記 の よう な も の が あり ます 。 
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イベ ント ! 説明 イベ ント 


iloadstart 。 読み 込み 開始 。 jload 
:progress 読み 和み 中 。 CIOOee 二 に 
iabort , 読み 込み 中 止 loadend 





如 ezger.addEventListener( "load", function(ey){ の 7.innerHTML = fReader. 


result: }): 
ファ イル 読み 込み 完了 時 の 処理 を 定義 し て いま す 。 


如 egger.readAsText( が /e, "utf-8"): 
テキ スト ファ イル の 読み 込み を 非同期 で 開始 し て いま す 。 


ぁ ょ ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome 
O メ メ 〇 O 


ト EIEII 


O 





過 克 ブラ ウザ 外 と の ドラ ッ グ & ド ロップ の や り 取 り を し た い ・・ P372 
7 ファ イル の 属性 を 取得 し た い ・・・…・・ P373 
【SAMPLE】 フ ァイル の 内 容 を 取得 する ・・‥・ P379 





Opera IiOS6 Andiroid 
〇 ⑳⑲ O 
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で 敵対 評 対 計 S で へい 


ン 評 


[ 芝 蒲 へ 1] 











フ 
ィ 
ル 
操 
作 





ドラ ッ グ S ド ロッ プ で 
要素 の 色 を 変え る 


左側 の ボッ クス の どちら か を 右端 の ポッ クス に ドラ ッ グ & ドロ ッ プ する と 、 動 か し た ボッ ク 
ス と 同じ 文字 色 ・ 背 景色 に 変化 し ます 。draggable 属 性 で ドラ ッ グ を 許可 し 、 各 イベ ント を 定 
義 し て ドロ ッ プ を 許可 し 、 要 素 の id を 渡す こと で 、 元 の 要素 の スタ イル を 取得 し て いま す 。 
getComputedStyle 関 数 は 、 最 終 的 に 要素 に 適用 され た スタ イル を 取得 し ます 。 な お 、 
draggable 属 性 は IE9 ま で の IE は 対応 し て いま せん 。 





HTML&JjavaScript ※ レ イア ウト は CSS で 指定 し て いま す 
<bodV> 

<div class="box" id=" の gg_07" draggable="true"> ド ラッ グ さ れる 要素 01</diV> 
<div class="box" id=" の gg_02" draggable="true"> ド ラッ グ さ れる 要素 02</diV> 
<div class="box" id=" の op_e/"> ド ロッ プ 先 要素 </div> 


<SCript> 


// 8 を 取得 し ます 
Var の ag_07 = document.qetElementById(" の ag_07"): 
Var の ag_02 = document.getElementById(" の ag_02"): 
Var の op_e/ = document.getElementById(" の op_e/"): 
/ ドラ ッ グ 開始 時 の イベ ント 理 関数 を 定義 し ます 
function dragHandler(e) { 
ラッ グ さ れ た 要素 の id を 格納 し ます 

e.dataTransfer.setData( "Text", e.target.id): 
} 

ドラ ッ グ 開始 時 の イベ ント 処理 関数 を 登録 し ます 
の ag_07.addEventListener("dragstart", dragHandler): 
の ag_02.addEventListener( "dragstart", draqHandler): 


// 既定 の イベ ント 処理 を 無効 に し て ドロ ッ プ を 有効 に し ます 

の op_e/.addEventListener( "dragenter", function(e) { 
e.preventDefault(): 

): 

の op_e/.addEventListener( "dragover", function(e) { 

e.preventDefault(): 


): 


/ ドロ ッ プ 時 の イベ ント 処理 を 定義 し ます 
の op_e/.ondrop = function(e) { 
/ ドラ ッ グ され た 要素 の id を 取り 出し ます 
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Var 77 = e.dataTransfergetData( "Text"): 

/ id か ら 要 素 を 取得 し ます 。 
Var e/ = document.getElementById(77): 

/ 要素 の CSS 適 用 後 の 実 際 の スタ イル を 取得 し ます 。 
var se = getComputedStvle(e/): 

育 景 色 と 呈 を ドラ ッ グ され た 要素 の も の に 設定 し ます 

の gp_e/.s7/e.backgroundColor = s れ /e.backqroundColor: 
の op e/.s れ 7e.color = s が 7e.color: 


| 





</script> 
</bodV> 


.box{ 
heiqht: 100px: 


width:100px: 

border:solid 1px black: 
marqin:20px 20px 50px 20Dpx: 
padding:5Dx: 

float:left: 








RBS 清順 Is ロア の Ns NE 


0 


} 

#drag_01{ 
background-color:green: 
color:orande: 


} 

#drag_02{ 
backqround-color:blue: 
color:red: 


} 














[ 信 状 さい 
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Internet Exp 










BC | 借 ドラ ッ グ 8. ド ロッ プ で 要素 .… x 






ドロ ッ プ 先 要 素 





・ の ・ Cl 人 ほ ド ラッ グ & ド ロッ プ で 要素 .… ※ 





ドラ ッ グ & ド ロッ プ さ れ た 要素 と 同じ 文字 色 ・ 背 景色 に な り ま す 。 


ダ 
4 
イ 
月 
操 
作 


| 参 照 dataTransfersetData メソ ッ ド ーー ドー P370 
ロ n dataTransfergetData メソ ッ ド ーー P370 


onDrop イベ ント ドド ーーー ドー ドー P370 
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FILE HANDLING.SAMPLE-02 


ファ イル の 内 容 を 
取得 する 






ー 


ファ イル ダイ アロ グ で 取得 し た ファ イル の ファ イル 名 と MIME タ イプ を 表示 し 、MIME タ イ 


プ で 読み 込み 後 の 処 理 を 分 け て いま す 。 こ の 際 、 直 感 的 な 順序 と は 逆 で す が 、 非 同期 処理 で は 、 | 
完了 時 の 処理 を まず 定義 し 、 そ の 後 で 読み 込み を 開始 する 必要 が あり ます 。 | 


画像 ファ イル な ら 、 フ ァイル の 中 身 を 読み 込ん で Data URL 形式 に 変換 し 、 画 面 に 表示 し て 
いま す 。 Data URL 形式 は URL に 実際 の デー タ を 埋め 込む た め の 形式 で 、img 要 素 の src 属 性 に 
設定 する と 、 画 面 に その 画像 デー タ を 表示 する こと が で きま す 。 


さい いい へ の 半 RBS 沸 棒 NIE ロ テ の さい 


テキ スト ファ イル な ら テ キス ト エ リア を 作成 し て 、 そ の 中 に 内 容 を 表示 し て いま す 。 


それ 以外 の ファ イル タイ プ の 場合 は 、ArrayBuffer 形 式 で 読み 込ん だ うえ で 、 最 初 の 1 バイ 

















ル 
ト 目 の 値 を 表示 し て いま す 。 型 付き 配列 用 の ArrayBuffer オ ブ ジ ェクト の 使用 法 は サン ブル の の 
該当 箇所 を 参照 し て くだ さい 。 内 
容 
を 
※ レ イア ウト は CSS で 指定 し て いま す 取 
<body> 得 
<form> る 
<input id=" が /e77p/7" type="file" > 
<div id ="77essa96e "></ diV> 
<div id="o/ の 7"></diV> 
</form> 
</bodV> 
要素 の 参照 を 取得 し ます 
var 7 が ep = document.getElementById(" が /e77p/7「): 
var go の 7 = document.getElementById( "og の 7): 
var 77essa9e = document.qetElementById( "essage"): 
イル が 選択 され た 際 の 処 理 を 定義 し ます 3 
7e77p/ た .0nchange = function(eve77) { フ L 
の 
選択 され た 最初 の ファ イ を 取得 し ます イ 
var が /e = 万 /e77p7.files[0]: 内 
作 
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if (!7/e) { 





// キャ ン セ ル 時 な < ク を 行い ます 
Treturn: 

1 
ファ イル の 情報 を 出力 し ます 


output.innerHTML = "の: 

output.innerHTML += "ファ イル 名 :" + 7/e.name: 
output.innerHTML += "<br>MIME タ イプ :" + 万 /e.tVpe: 
output.innerHTML += "<hr> ": 


/ FileReader オ ブ ジ ェクト を 生成 し ます 


Var 7 が /e ん eae/ = new FileReader(): 


// 読み 込み 開始 時 の 処理 を 定義 し ます 
1 eZeage/.onloadstart = function() { 
776essg9@.innerHTML = "読み 込み 中 で す 。": 


// 読み 込み 全体 の 終了 時 の 処理 を 定義 し ます 
7eAeage/.onloadend = function() { 
77e5s29@.1innerHTML = "": 


1 





NII 


// MIME タ イプ で 読み 込み 処理 を 分 岐 し ます 


if (/image/.*/.test( が /e.type)) { 
* 画像 ファ イル の 場合 */ 


/ 読み 込み 完了 時 の 処理 を 登録 し ます 

が eeage/.onload = function(eve77) { 
Var 777a9e = new Imade(): 
// Data URL 形式 の 画像 デー タ を img 要 素 に 設定 し ます 
罰 729@.SrC = が /e ん ege/.result: 
output.appendChild(7 カ ae): 


// 画像 ファ イル を Data URL 形式 で 読み 込み ます 
7/e ん egge/.readAsDataURL( が が /e): 
} else if (/text\/.*/.test( が /e.type) ) { 


ー4 /* テキ スト ファ イル の 場合 * 
/ 読み 込み 完 了 時 の 処理 を 登録 し ます 


が が eZeage/.onload = function(eve77) { 
Var 7ex7g/ea = document.createElement( "7exg/eg"): 





380 | FILE HANDLINGSAMPLE-02 


























// テキ スト エリ ア に 読み 込ん だ テキ スト を 設定 し ます フ | 
textarea.value = が eZeae/.result: ア | 
output.appendChild(7ex7g/eg): 1 
6 の 
内 L 
容 
C 場 人 字 化 けし ます を | 
太 eReger. readAsTet(706。 "shift 1: 取 
写 
else す 
} else { る | 
・ それ 以外 の 場合 
7/e ん eager.onload = function(eve/7) { 
var の = document.createElement("div"): 
// ArrayBuffer 形 式 の デー タ を 取得 し ます 
Var // が e/ = re 
バイ ト 配 列 (Uint8Array) に 変換 し ます 
Var fe4pyー new Uint8Array (が e/): 
の ] バイ ト の 値 を 取得 し ます 
div.innerHTML = "この ファ イル の 最初 の 1 バイ ト の 値 は " + 
byteArray[0] + " で す ": 
output.appendChild(div): 
0 
ArrayBuffer 形 式 で 読み 込み ます 
77/e/eager. readAsArrayBuffer(fle): 
} 
訪 | 
| 
| 
| 
1 イ | 
| ル | 
| 操 | 
| 作 





レー ユ 
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を 但 htp:/wwshoelsha.… の ・ 昌 で 騙 アイ ル の 内 容 を 取得 する 
CUsers\ 六 集 部 共用 Des 孝昭 


ファ イル 名 :SE_png 
MIME タ イブ -image'png 


画像 ファ イル の 場合 、 読 み 込 ん だ 画像 を 表示 し ます 。 


N 


紅き Pdhoelha.… の き G | G アイル の 内 人 < 呈 介 する 


CiUsers\ 編 集 部 共用 Des 孝昭 
ファ イル 名 遠野 物語 .ct 
AIMR タ イフ: :textplam 


人 人 82 は 2 





じ た る まま を 書き た り 。 














テキ スト ファ イル の 場合 、 テ キス ト エ リア 内 に テキ スト を 表示 し ます 。 


に 介 hdp:/www shoelsha.… D ・ 8G| き アイ ル の 内 容 を 取得 する 


C:\Users\ 編 集 部 共用 \Des 孝昭 
ファ イル 名 :sample_wmv 
MGS ブ -video/x-ms-wmv 


この ファ イル の 最初 の 1 バイ ト の 値 は 4s で す 





それ 以外 の ファ イル の 場合 、 読 み 込ん だ 最初 の 1 バイ ト 目 の 値 を 表示 し ます 。 
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Android 





ファ イル を 選択 shoeisha_logo gif 
ファ イル 名 :shoeisha_logo_gif 
MIME タ イブ:image/gif 





ファ イル を ) 較 の" 上 
ファ イル 名 :image.jpg 
MIME タ イプ :image/jpeg 















| 参 照 fleg プ 連 2 の っ 07 て MMSokt:tt P373 readAsDataURL メソ ッ ド ドー ドー P374 
ロ name プロ パテ ィ ー・・・・・ ・ P373 readAsText メソ ッ ド ・ ー P374 
PDG プロ 誠 学 1 こ ・ ュ TekdctGcaitRo3coo P373 readasArrayBuffer メソ ツ ッ ド ・・・ ーー P374 
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本 


中 計 G 


N 
ん 


の et 黄 庁 Gt 


還 較 | いい 


レ と 
フ 
と 2 
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ブラ ウザ の 保存 領域 に 
デー タ の 読み 書き を 行い た い 


文 = WindOW.sessi0nStOrad6 セッ ショ ン : ス トレ ー ジ の 
文 = window.lOcalStOrade 。 ロー カル スト レー ジ の 人 


文 .length 格納 され て いる 「 キ ー ノ 仁 」 バ ア の 数 の 取得 
文 .keV( 参 照 番号 ) 参照 番 号 の 位置 に ある キー の 取得 

文 .getItem($) キー に 革 応 する 値 の 取得 

た .Setltem ( 銘 ,^) キー に 対応 する 値 4 の 設定 

文 .removeltem() キー@ と その 仁 の 朋 際 

文 .clear() すべ て の キー と 値 の 削除 





衣 ……Storade オ ブ ジ ェクト 
人 …… デ ー タ が 格納 され る 項目 名 (キー) 
人 …… 項 目 に 保存 する 値 ( 文 字 列 ) 








プロ パテ ィ (sessionStorage、localStorage、length) 
メソ ッ ド (key、getltem、setltem、removeltem、clear) 





HTML5 で は デー タ を ユー ザー 環境 に 保存 する 手段 と し て 、 ロ ー カ ル ・ ス トレ ー ジ と セッ シ 
ヨン ・ ス トレ ー ジ が 利用 可能 で す 。 


ロー カル ・ ス トレ ー ジ は オリ ジン (コラ ム 参 照 ) ご と に 独立 し た デー タ の 保存 領域 を 用 意 す る 
も の で 、 オ リジン が 同一 な ら ウ ィ ン ド ウ や ペー ジ を また いで 共有 され ます 。 ま た 、 明示 的 に 削 
除 し な い 限り 、 ブ ラウ ザ を 終了 させ て も 内 容 が 保持 され ます 。 


セッ ショ ン ・ ス トレ ー ジ は セッ ショ ン ご と に デー タ の 保存 領域 を 用 意 す る も の で 、 セ ッ シ ョ 
ン の 終わ り と と も に 破棄 され ます 。 ま た 、 セ ッ シ ョ ン が 同一 で も オリ ジン が 異な る と セッ ショ 
ン ・ ス トレ ー ジ は 別に な り ま す 。 


ー つ の セッ ショ ン は 、 そ の ウィ ンド ウ ( タ ブ に 分 か れ て いる 場合 は それ ぞ れ の タブ ) が 開い て 
いる あい だ 存続 し ます 。 同じ ウィ ンド ウ ま た は タブ の な か で ペー ジ 居 移 し て も 、 セ ッ シ ョ ン は 
変わ り ま せん 。 


フレ ー ム は 自分 が 属し て いる ペー ジ と セッ ショ ン を 共有 し ます 。 子 ウ イン ドウ は 、 親 の セッ 
ショ ン の 内 容 を コピ ー し て 、 新 し い セ ッ シ ョ ン を 開始 し ます 。 
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デー タ を 読み 書き する 方 法 は スト レー ジ で 共通 で す 。 データ に 項目 名 (キー) を 割り 当て て 保 | 5 
存 し (setltem メ ソ ッ ド )、 取 得する と き に は その キー で 取り 出し ます (getltem メ ソ ッ ド )。 ラ 
人 
key( 参 照 番号 ) メ ソ ッ ド は 「 参 照 番 号 」 の 位置 に 格納 され た キー を 返し ます が 、 キ ー の 位置 を 
決め る ルー ル は ブラ ウザ の 実装 に 任 さ れ て いま す 。 値 の 更新 で は 位置 は 変わ り ま せん が 、 追 加 保 [ 
や 削除 の 場合 は 変わ る こと が あり ます 。 通常 は 、for 文 で すべ て の キー を 列挙 する よう な 場合 存 | 
に 使用 し ます 。 可 | 
域 ] 
ロー カル ファ イル を 「file://] で 始ま る URLI や ファ イル パス で 開い た 場合 は 、、 ブ ラウ ザ の 実装 思 | 
に よっ て 、 ス トレ ー ジ が 存在 し な い 、storage イ ベン ト が 発生 し な いと いっ た 問題 が ある た め 、 | ト 
テス ト の 際 に は 注意 が 必要 で す 。 電 | 
読 | 
み 
書 
window.sessioStorage.setItem("age", 23): きけ [ 
セッ ショ ン ・ ス トレ ー ジ に キー[「age」 で 値 「23」 を 保存 し ます 。 を | 
var /se/ge = window.sessionStorage.getItem("age"): 行 | 
セッ ショ ン ・ ス トレ ー ジ か ら キ ー「age」 の 値 を 取得 し ます 。 | 





ー 
ー 
| 










Column オリ ジン (origin) 
オリ ジン は 送信 元 と も 訳 さ れ 、URL の 「 ス キー ム 」「 ド メイ ン 」「 ポ ー ト 」 を 合わ せ た も の で す 。 た と 
えば 、 









http://wwwexample.com:8080/dir/index.html 







と いう URL で は 、「http://www.example.com:8080」 ま で が オリ ジン で す 。 


オリ ジン は スク リプ ト に よる アク セス を 制限 する 際 の 単位 と し て 使用 され ます 。 


ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 


@ O 〇 O O 〇 O O O 〇 


照 デー タ 変 更 イ ベン ト を ハン ドリ ング し た い ・・・ P386 | 
ネム 【SAMPLE】 テ キス ト の 内 容 を Web Storage に 保存 する 
SNR 2 の ZS ie 2 は: P394 
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本 





Ke(@pAAt39 コ 引い | 才 り 4 | 


デー タタ 変更 イベ ント を 
ハン ドリ ング し た い 


window.onstorade = 太 


丸 …… 実 行 する 命令 (関数 や 関数 名 ) 








茹 皇 イベ ント 





Web Storage で は 、 複 数 の ウィ ンド ウ ・ タ ブ が 同一 の デー タ 保 存 領域 (スト レー ジ ) に 対し 
て 読み 書き を 行う こと が 可能 で す 。 

その た め 、 別 の ウィ ンド ウ ・ タ ブ で 行わ れ た 変更 を 検知 し て 適切 に 対処 し な けれ ば 、 デ ー タ 
の 整合 性 に 問題 が 生じ る 場合 が あり ます 。 

デー タ の 変更 の 検知 に は 、onstorage イ ベン ト を 利用 し ます 。 こ の イベ ント は 、 変更 が 行わ 
れ た スト レー ジ を 共有 する ウィ ンド ウ や タブ の 、window オ ブ ジ ェクト で 発生 し ます が 、IE 以 
外 で は 、 変 更 を 行っ た ウィ ンド ウ や タブ その も の で は 発生 し ませ ん 。 

onstorage イ ベン ト で は 、 イ ベン ト の 引数 の 属性 と し て 次 の よう な 情報 が 取得 で きま す 。 


プロ バテ ィ ! 説明 
KBVEESPCSPs ES 
ioldValue 変更 前 の 値 


window.onstorage = function(eve7 の { 
Var ん ey = eve/ た . ん ey: 
console.log( ん ey): 


値 が 変更 され た キー を デバ ッ グ 用 コン ソー ル に 出力 し て いま す 。 








ょ ブラ ウザ 対応 表 IE10 IE9 3:) Fx Chrome Safari Opera iOS6 Android 


O 〇 O O O O O O O O 


| 要 照 ブラ ウザ の 保存 領域 に デー タ の 読み 書き を 行い た い ・・ P384 
ラク が 【SAMPLE】 テ キス ト の 内 容 を Web Storage に 保存 する 
け は ri 2SOTDc eg の NSPY ま は P394 
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Indexed DB へ の 接続 や 
初期 作 を し た い 


X = window.indexedDB.open($, ^) テー タバ ー ス へ の 
た = WindowindexedDB.deleteDatabase($) テー29 
軒 .clOse() テー タバ ー ス へ の 全 き 了 


放 …… リ クエ スト ・ オ ブ ジ ェクト 。 

@ デー タベース 名 

人 …… 接 続 す る デー タベース の バー ジョ ン (1 以 上 の 整数 値 ) 
@… 実 行 する 命令 (関数 や 関数 名 ) 

一 …… デ ー タ ベー ス ・ オ ブ ジ ェクト 











馬 還 メソ ッ ド 





HTML5 で は 簡単 な キー/ 値 ペア で の デー タ の 保存 に は Web Storage(p.384 参 照 ) が 用 意 さ れ 
て いま す が 、 大 量 の デー タ や 高度 な 機能 を 扱う に は 、Indexed DB を 使用 する 必要 が あり ます 。 


Indexed DB で は 、 デ ー タ ベー ス の 中 に 任意 の 数 だ け 作 成 可 能 な 、「 オ ブ ジ ェクト スト ア ]」 
(RDBMS の テー ブル に 相当 ) に 、 任 意 の 数 の デー タ を オブ ジェ クト と し て 格納 し ます 。 


また 、Indexed DB で は 、 非 同期 処理 が 採用 され て いま す 。 メソッド は 、 バ ッ ク グ ラウ ンド 


処理 の 起動 だ け を 行い 、 リ クエ スト ・ オ ブ ジ ェクト 文 を 返し て 終了 し ます 。 そ の 後 、 処 理 が 完 
了 す る と 、success イ ベン ト が 戻り 値 娘 で 発生 し 、 結 果 が 文 .result に 格納 され ます 。 
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文 = window.indexedDB.open( 多 , ^) 
文 .OhSUCCeSS = 急 

デー タベース に 接続 する に は 、 デ ー タ ベー ス 名 多 と バー ジョ ン 4 を 指定 し ます 。 接続 成功 時 
に は 非同期 リク エス ト 文 の result 属 性 に デー タベース ・ オ ブ ジ ェクト が 格納 され ます 。 

指定 し た 名 前 の デー タベース が 存在 し な けれ ば 新規 に 作成 され 、 指 定 し た バー ジョ ン よ り 接 
続 先 の バー ジョ ン が 上 だ っ た 場合 に は 接続 が 失敗 し ます 。 こ の 時 、 作 成 ・ 接 続 で きる デー タ ベ 
ー ス は 、 ペ ー ジ と オリ ジン (p.385 参 照 ) が 同じ も の に 限定 され ます 。 


文 .0nupdradeneeded = の 

接続 先 の バー ジョ ン ( 新 規 作成 時 は 0) よ り 上 の バー ジョ ン を 指定 し た 場合 、success イ ベン 
ト の 前 に upgradeneeded イ ベン ト が 発生 し ます 。 こ の イベ ント は 、 初 期 化 と アッ プ グ レー ド 
処理 の た め の イ ベン ト で す 。 オ ブ ジ ェクト スト ア と イン デック ス の 作成 ・ 削 除 は この イベ ント 
の 中 で し か 行え ませ ん 。 


マ = 画 .createObjectStore( 広 , の ): 

デー タベース に オブ ジェ クト スト ア を 作成 する に は 、 名 前 広 と 、keyPath 属 性 と 
autolIncrement 属 性 を 持つ オブ ジェ クト を 指定 し ます 。 

keyPath 属 性 に は 、 オ ブ ジ ェクト スト ア が 、 オ ブ ジ ェクト を 取得 する 際 に キー と し て 使用 す 
る 属性 名 を 指定 し ます 。autolncrement 属 性 に は 、 オ ブ ジ ェクト を 格納 する 際 、 キ ー 属 性 に 
番号 を カウ ント アッ プ し つつ 設定 する か どう か を 指定 し ます 。 

upgradeneeded イ ベン ト の 中 で デー タ の 追加 や 加工 を 行う こと も で きま す 。 た だ し 、 こ の 
イベ ント の 中 で は 、 文 .transaction か ら 取 得 で きる 、"versionchange" モ ー ド の トラ ン ザ クシ 
ョ ン (次項 で 解説 ) が すでに 開始 され て いる た め 、 新 た に それ 以外 の トラ ン ザ クシ ョ ン を 開始 す 
る こと は で きま せん 。 





p ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari Opera iOS6 Android 
(@! と 4 X 〇 〇 と 4 X 3 X 
| 照 デー タ の 追加 、 更 新 ・ 削 除 が し た い ・・・・・・・ P389 
E 衝 【SAMPLE】Indexed DB を 操作 する ・・-・-・P397 
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記 eip が aa 和 N ミ 区 華 際 0 〇 〔…t《〔W〈《 や 
デー タ の 追加 、 更 新 ・ 削 除 が し た い 


文 = 金 .transaction (人 人 , @) トラ ン ザク ショ ン 人 
一 = 文 .0bjectStore( マ ) オブ ジェ クト スト ア 了 得 


大 …… ト ラン ザク ショ ン ・ オ ブ ジ ェクト 
デー タベース ・ オ ブ ジ ェクト 

ム …… 対 象 に な る オブ ジェ クト スト ア 名 の 配列 
@…… ト ラン ザク ショ ン の モー ド 

較 …… オ ブ ジ ェクト スト ア ・ オ ブ ジ ェクト 
マー オブ ジェ クト スト ア 名 





メソ ッ ド 





Indexed DB で は デー タ の 読み 書き は トラ ン ザ クシ ョ ン を 通じ て 行い ます 。 ト ラン ザク ショ 
ン で 行わ れ た デー タ の 変更 は 、 ト ラン ザク ショ ン 単 位 で 適用 され ます 。 そ の た め 、 変 更 が 半端 
に 適用 され 、 デ ー タ の 整合 性 が 壊れ る の を 防ぐ こと が で きま す 。 


LOCALDATA&OFFLINE.04 | 389 








ン r で は 遂 療 ・ 壮 環 党 軍 3 必 一 持て R 諾 沼 さ 各 共 きろ > の ワ Ooxoo ュ っ 一 


ーJ〒 さ ー ロ ] 





蔽 いい Ns 





へ NN 半 


1 
アリ 
ル 
デ 
| 
タ 
と 





ーーーーーーーー 一 





文 = 金 .transaction (人, 人 @) 

デー タ の 読み 書き を 行う に は 、 ま ず 、 デ ー タ ベー ス ・ オ ブ ジ ェクト 金 の transaction メ ソ ッ 
ド で トラ ン ザ クシ ョ ン を 開始 し ます (upgradeneeded イ ベン ト を 除く )。 

配列 4 は 、 ト ラン ザク ショ ン で アク セス する オブ ジェ クト スト ア 名 の 配列 で す 。 モ ー ド 念 は 
開始 する トラ ン ザ クシ ョ ン が 読み 書き モー ド な ら "readwrite" を 、 読 み 取り 専用 モー ド な ら 、 
"readonly" を 指定 し ます 。 読み 書き モー ド の トラ ン ザ クシ ョ ン は 、 同 時 に 一 つ し か 存在 で き 
ませ ん 。 


較 = 文 .ObjectStore( マ ) 
実際 に デー タ に アク セス する に は 、 ト ラン ザク ショ ン 娘 の objectStore メ ソ ッ ド で オブ ジェ 
クト スト ア を 取得 し ます 。 引数 は 対象 の オブ ジェ クト スト ア の 名 前 で す 。 


= 一.add(C[, へ ]) プ を = 画 .put(C[, へ ]) 

オブ ジェ クト スト ア 画 に デー タ を 追加 する に は add メ ソ ッ ド か put メ ソ ッ ド を 使用 し ま 
す 。 オ ブ ジ ェクト スト ア に キー 属性 が 設定 され て いな い 場 合 は キー へ も 指定 し ます 。 キ ー が 重 
複 し て いた 場合 、add で は エラ ー に な り ま す が 、put で は 上 書き に な り ま す 。 

オブ ジェ クト へ は その も の で は な く 、 コ ピー が 格納 され ます 。DOM 要 素 な どの 、 特 定 の ウ 
ィ ン ド ウ や タブ を 越え て コピ ー 不 可能 な タイ プ の オブ ジェ クト は 保存 で きま せん 。 


凛 = 軒 .get( へ ) / 式 = 画 .delete( へ ) / 芝 = 画 .clear() 

取得 に は get メ ソ ッ ド を 、 削 除 に は delete メ ソ ッ ド を キー へ を 指定 し て 呼び 出し ます 。 
clear メ ソ ッ ド で すべ て の デー タ が 削除 され ます 。 

処理 成功 時 に は 、 リ クエ スト ・ オ ブ ジ ェクト 区 の result 属 性 に 、add/put メ ソ ッ ド で は は 追 
加 ・ 更 新 さ れ た キー が 、get メ ソ ッ ド で は 取得 し た オブ ジェ クト が 格納 され ます 。 


〇 = 玉 .index() 

イン デック ス 〇 を 取得 する に は イン デック ス 名 を 指定 し て index メ ソ ッ ド を 呼び 出し ま 
す 。upgradeneeded イ ベン ト 内 で 、 予 め 作 成 し て お く 必要 が あり ます 。 

イン デック ス に は 、 オ ブ ジ ェクト スト ア と 同じ get( へ ) メ ソ ッ ド が 存在 し 、 オ ブ ジ ェクト ス 
ト ア の キー 属性 (プラ イマ リー・ キ ー) と は 別に 、 イン デック ス 独 自 の キー 属性 を キー に し て オ 
ブ ジ ェクト を 取得 で きま す 。 

また 、get メ ソ ッ ド 、delete メ ソ ッ ド で 指定 する キー は 通常 の キー の ほか に 「 キ ー 範 囲 」 も 指 
定 で きま す 。 詳細 は サン プル を ご 覧 くだ さい 。 














と ブラ ウザ 対応 表 IE10 3 IE8 Fx Chrome Safari Opera iOS6 Android 
〇 3 ※ 〇 O 〇 し 3 X X X 
| 照 Indexed DB へ の 接続 や 初期 化 を し た い ・・・・・ P387 
包 【SAMPLE】Indexed DB を 操作 する P397 
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オフ ライ ン 時 に も 
キャ ッシュ を 表示 させ た い 


<html man1fest= 文 > マニ フェ スト ・ フ ァイル の 指定 





衣 …… キ ャ ッシュ ・ マ ニ フ ェ スト の パス 





HTML 属 性 値 





アプ リケーション ・ キ ャ ッシュ で は 、 自 動 的 に 保存 され た 控え (キャ ッシュ ) を 、 オ フラ イン 
時 に 代替 と し て 使用 する よう に 設定 する こと が で きま す 。 


キャ ッシュ を 利用 する に は 、 マ ニ フ ェ スト ・ フ ァイル を 作成 し 、html 要 素 の manifest 属 性 
に その パス を 指定 し ます 。 マ ニ フ ェ スト の 最初 の 行 に は 「CACHE MANIFEST] と だ け 記 載 し 
ます 。 


マニ フェ スト は 「CACHE:」「NETWORK:」「FALLBACK:]」 の いずれ か で 始ま る セク ショ ン に 分 
か れ 、 そ れ ぞ れ の セク ショ ン で 、「 キ ャ ッシュ コ 対 象 の 指定 ]][ キ ャ ッシュ 除外 の 指定 」「 代 替 コ ン テ 
ン ツ の 指定 」 を 行い ます 。「#」 で 始ま る 行 は コメ ント 行 で す 。 詳細 は サン プル を 参照 くだ さい 。 


REIMIEIIIC9) 
CACHE MANIFEST 


# ヤク ショ ン 無 指定 の 場合 、 既 定 で は 「CACHE:] セ クシ ョ ン に な り ま す 。 
sample.html 


NETWORK: 
network.html 


p ブラ ウザ 対応 表 IE10 IE9 13:】 Fx Chrome Safari Opera iOS6 Android 


O O O O O O O O O 
史 現在 の キャ ッシュ 状態 を 取得 し た い 
ラン 【SAMPLE]】 オフ ライ ン 状 態 と キャ ッシュ 状態 を 
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で は 尼 半 前 則 . 党 伺う め ー コ 


0 





GtO ヨ RS させ dt 笛 加 く へ MIJS 


一 
ン 


(Y ふ ーー ロ ] 


T 





NN (いふ いさ 


現在 の キャ ッシュ 状態 を 取得 し た い 


= WindoW.aDDlicationCache キャ ッシュ オフ ジェ クト の 
-| 文 .update() キャ ッシュ の 更新 (ダウ ン ロ ー ド の み ) 
衣 .SWapCache () update() で ダウ ン ロ ー ド し た ファ イル の 通用 





玉 …… ア プリ ケー ショ ン ・ キ ャ ッシュ ・ オ ブ ジ ェクト 





台 皇 還 プロ バテ ィ (applicationCache)、 メ ソ ッ ド (update、swapCache) 





読み 込み 時 に マニ フェ スト が 更新 され て いる と 、 キ ャ ッシュ も 更新 され ます 。 そ の 際 の 更新 
| 状況 は 、windowapplicationCache の status 属 性 か ら 取 得 で きま す 。 





, キャ ッシュ は 最新 . UPDATEREADY 4 ダウ ン ロ ー ド 完了 ( 未 中 用 ) ] 


| 値 | 

! UNCACHED 0 キャ ッシュ し て いな い DOWNLOADING 3 。! キ ャ ッシュ の ダウンロード 中 
1 
2 


CHECKING マニ フェ スト の チェ ッ ク 中 : 0BSOLETE :5 マニ フェ スト が 邊 在 し な く な っ た 


オ 
F 
ラ 
て 
。 


update メ ソ ッ ド で 明示 的 に 更新 を 開始 させ る こと も で きま す 。 た だ し 、 swapCache メ ソ 
ッ ド で 適用 する まで 、 新規 に ダウ ン ロ ー ド し た ファ イル は キャ ッシュ に 反映 され ませ ん 。 





(Y 立 一 リキ ー ロ 


間 キャ ッシュ 状態 は 、 windowapplicationCache に 以下 の イベ ント を 発生 させ ます 。 


イベ ント ! 説明 ! イベ ント | 説明 

.checking マニ フェ スト の チェ ッ ク 中 downloading . ダウ ン ロ ー ド 開始 

noupdate マニ フェ スト の 更新 な し :Progress = ダウン ロー ド 中 。 : 

obsolete 。 ! マニ フェ スト が 存在 し な く な っ た updateready ダウ ン ロ ー ド 完了 ( 未 適用 ) 

error マニ フェ スト が な い 等 の エラ ー cached ' キ ャ ッシュ 更新 完了 

> ブラ ウザ 対応 表 IE10 IE9 | ゴ :】 Fx Chrome Safari Opera iOS6 Android 
( X X ) 億 ) ( 雪 る で) (の 


に ) 、 リ し ノ 





せ た い ・・P391 
状態 を 取得 する 
-P401 





| 参照 オフ ライ ン 時 に も キヤ ャ ッシュ を 表示 
人 生 貞 【SAMPLE】 オフ ライ ン 状 胃 と キャ 
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オン ライ ン ・ オ フラ イン 状態 を 
取得 し た い 


文 = WindOW.navigatOr.0hL1G オン ライ ン が 態 の 取得 


衣 …… オ ン ラ イン 状態 (オン ライ ン な ら true、 オ フラ イン な ら false) 











プロ パテ ィ 


ブラ ウザ が ネッ トワ ー ク に つなが っ て いる か どう か は 、 ナ ビ ゲ ー タ ー・ オ ブ ジ ェクト の 
onLine プ ロ パ ティ で 取得 する こと が で きま す 。 オ ン ラ イン 時 は この 値 が true に な り 、 オ フラ 
イン 時 は false に な り ま す 。 


また 、 オ ン ラ イン に な っ た 時 点 、 オ フラ イン に な っ た 時 点 で 、body 要 素 ( さ ら に document 
及び window オ ブ ジ ェクト ) で online イ ベン ト 、offline イ ベン ト が 発生 し ます 。 


document.onoffline = function(){ 
alert(" オ フラ イン に な り ま し た "): 


} 
オフ ライ ン ・ イ ベン ト を 取得 し て いま す 。 


p ブラ ウザ 対応 表 IE10 | 3:) Fx Chrome Safari Opera iOS6 Android 


〇 X 4 〇 〇 〇 9 〇 〇 


【SAMPLE】 オフ ライ ン 状 態 と キャ ッシュ 状態 を 取得 する 
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ン と 主 で 敵対 慌 遇 交 NNS させ 8 本 庫 





と 村 で て 敵 週 対 緒 交 " へ MIN・ へ MINY 


[へ MiJtY 立 ーー ロ ] 
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テキ スト の 内 容 を 
、 Web Storage に 保存 する 
mm ャ ーーーーーーーーー ツ ーー ツーーー ツ ーーーーーーmーーmmw ツ ww 


テキ スト エリ ア の 内 容 を ロー カル スト レー ジ に 保存 し て いま す 。 こ の サン プル を 複数 の ウィ 
ンド ウ や タブ で 開き 、 一 方 を 更新 する と 、 他 の すべ て の ウィ ンド ウ ・ タ ブ も リア ル タ イ ム に 同 
期し ます 。 ま た 、 い っ た ん ブラ ウザ を 終了 させ て も 、 以 前 の デー タ が 復元 され ます 。 


同期 に つい て は 、storage イ ベン ト を 使っ て 、 他 の ウィ ンド ウ ・ タ ブ で の 変更 を 検知 し て 再 
読み 込み を 行っ て いま す 。 た だ し 、IE で は 、 変 更 を 行っ た ウィ ンド ウ ・ タ ブ 自 身 で も storage 
イベ ント が 発生 する た め 、 そ の 対策 も 行っ て いま す 。 


変更 を 行っ た ウィ ンド ウ ・ タ ブ 自 身 で 、 さ ら に 再読 み 込 み を 行う と 、 タ イミ ング の 問題 で 更 
新 中 の デー タ が 失わ れ て し まう こと が あり ます 。 


その た め 、 そ れ ぞ れ の ウィ ンド ウ ・ タ ブ が 、 自 分 自身 の 1D を 生成 し て 、 保 存する デー タ に 
この 1D を 含め ます 。 読み込み 時 に は 、 そ の デー タ に 記録 され て いる 1D と 自分 自身 の 1D を 
比較 し て 、 最 後に 保存 し た の が 自分 だ っ た 場合 は 、 読 み 込み を 行わ な いよ うに し て いま す 。 


保存 する デー タ に 1D を 含め る た め に 、cid 属 性 が この 1D, value 属 性 が テキ スト と いう 
保存 用 の オブ ジェ クト を 用 意 し て いま す 。 ス トレ ー ジ に は 基本 的 に 文字 列 し か 保存 で き な い た 
め 、 保 存 時 に は JSON 形式 の 文字 列 に 変換 し (]SON.stringify() メ ソ ッ ド )、 読 み 込み 時 に 復元 
(0SON.parse() メ ソ ッ ド ) し て いま す 。 


NN に 1 


1 
の / 
ル 
ル 
| 
タタ 
に 





※ レ イア ウト は CSS で 指定 し て いま す 


<body> 
<form> 
<textarea id= "7ex7"></textarea> 
</form> 
</body> 
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// スト レー ジ に 保存 する 際 の キー を 定義 
var 570Z46E KEY = "webstorage sample": 







// この タブ の ID を 生成 (1 E 対 策 ) 
var CZ7EW7 7 = (new Date()).getTime().toString(): 











// テキ スト エリ ア へ の 参照 を 取得 
var fex7 = document.qetElementById( "zex7"): 





/ スト レー ジ か ら の 読み 込み 処理 を 定義 
function /ga() { 
Var 37g = nul 
// 復元 の 失敗 に 備え て try-catch で 囲む 
try{ 
// 」5SON 形 式 で 保存 し た も の を オブ ジェ クト に 復元 
gg7g = JSON.parse(localStorage.getItem(57046E_ ん FE ア )): 




















/ タブ ご と に 生成 し た 1D を 利用 し て 

// この タブ で 行っ た 変更 は 読み 込ま な い (|E 対 策 ) 

f (37g.cid !== CZ7EW7 7 の ) { 
7ex7.Value = の g 好 .value: 


} 


} catch (e) { 





} 
} 





// スト レー ジ へ の 保存 処理 を 定義 
function save() { 

// 保存 用 の オブ ジェ クト を 定義 

// cid 属 性 に タブ の |1D を 設定 (最後 に 更新 し た タブ を 記録 ) 

var 37g = {cid: C/7EW7 7 の , value: fexf.Value}: 

// オブ ジェ クト を JSON 形式 に 変換 し て スト レー ジ に 保存 

localStorage.setItem(57 の 4GE KEY, JSON.stringify(7g な ) ) 
} 





// 初回 の デー タ の 読み 込み 
load(): 
テキ スト 入力 の た びに スト レー ジ を 更新 する よう に 
// イベ ント ハン ドラ を 設定 


7ex7.0n1nDut = saVe: 


// デー タ 変 更 イ ベン ト を 定義 
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// Firefox で は onstorage イ ベン ト ハ ンド ラ が 定義 され て いな いた め 
// addEventListener を 使用 し ます 。 
window.addEventListener("storage", function(eve77) { 


// キ ー の チェ ッ ク 
if (ee/7.Key !== 570A4GE ん KEY) { 
return: 


} 


// 他 の タブ で の 変更 を 読み 込ん で 反映 さ 


load(): 
















ーー 往 http:/wwwshoeisha.…、 の ・ 邑 G 


| か える び ょ こ び ょ こ み び ょ こび ょ こ 
あわ せ て び ょ こ び ょ こ む び ょ こび ょ こ 


に 3 寺 ス ト の 内 容 を Web Stora.… ※ 





















入力 し た テキ スト が ブラ ウザ に 保存 され ます 





芋 寺 測 人 @ htp:/ywwwshoeisha.… の ・ 中 G 


か える び ょ こ び ょ こ み び ょ こび ょ こ 
あわ せ て び ょ こ ひび ょ こむ び ょ こ び ょ こ 

















同じ ペー ジ を 別 の タブ で 開い て も 変更 が 反映 され ます 


localStorage プロ パテ イィ ーー… P384 
中 参照 2 getltem メソ ッ ド 】 


setltem メソ ッ ド 
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Indexed DB を 
操作 する 






[初期 化 ] ボ タン で 、Indexed DB に デー タ を 格納 し 、 テ ー ブ ル に 表示 し ます 。 「 ア ッ プ グレ ー 
ド 」 ボ タン を 押す と 、 デ ー タ ベー ス の バー ジョ ン が 2 に な り 、upgradeneeded イ ベン ト で デ 
ー タ が 更新 され 、id 列 (属性 ) が 追加 され ます (該当 箇所 は upgradeHandler 関 数 ) 。 


// 初期 化 ・ ク リア 
function c/ea/ の gg() { 
window.indexedDB.deleteDatabase(DB_NAME): 
clearU1(): // ボタ ン を 初期 化 
global_data = [// 初期 デー タ 用 の 配列 
{name: "山田 ", age: 45, mail: "a@example.com"} 
{name: "田中 ", age: 15, mai "b@example.com"}, 
{name: "佐藤 ", age: 20, mai "c@example.com"} 


]: 






































/ デー タベース へ の 接続 処理 
function connectDBAsync(ve/s7o7) { 
/ デー タベース へ の 接続 を リク エス ト 
var gpe7/eg = window.indexedDB.open(DB_NAME, ve/s77): 
// 初期 化 ・ ア ッ プ グレ ー ド 処理 


g/e7eg.0nupdgradeneeded = upgradeHandler: 
// 接続 成功 時 
の pe7eg.0nSUcCeSS = SuccessHandler: 


デー タベース の 初期 化 ・ ア ッ プ グレ ー ド 処理 
function upgradeHandler(eve7) { 

Var な = eve/ た target.transaction: // トラ ン ザ クシ ョ ン 取 得 

Var 579/@7: 

switch (eve/ た newVersion) { // バージョン で 処理 を 分 肢 

Case 1: 
s7o7e7 = な db.createObjectStore( "sore7", {keyPath: "name"}): 
sfo7e7.createIndex( "agelndex", "age"): 
for (var7= 0:7< global_data.length: な +) { 
so7e7.add(global_data[ 如 ): // 初 購 デー タ 自 加 (EE 同 期 ) 

} 


break: 


LOCALDATA&OFFLINE.SAMPLE-02 | 397 









N 
の 


% 叶 9 テハ せ ゴ 1 


@eH 寺 尊 ripoap っ の の Oo 生 N 


の ぃ el 土 共 G ロ D Op<moO ュ コー 


還 較 いい いい no に ュー ロ ] 








オ 
ラ 
ラ 
ドン 


(Y ふ ーー ロ 








Case 2: 
/ デー タダ 更新 ( 非 同期 ) 
sfo7e7 = か .objectStore("so/e7"): 
for (var7= 0:7< global_data.length: な +) { 
Var wg/ = global_data[: 
Mg/.id = た // globaLdata の 元 う 
so7e7.put(g/):/ 更新 し た 






break: 


/ 接続 成功 時 の 処理 


function successHandler(ere77) { 


} 


global_db = ee た.target.result: // デー タベース の 参照 取得 
global_db.onversionchange = function(e) { 
e.target.close(): // アッ プ グ レー ド 時 に は いっ た ん 切断 


setUI(global_db.version): // ボタ ン の 有効 無効 切り 替え 
displayData(false): // デー タ の 表示 


// デー タ の 表示 
function displayData(7s/7/Ze/) { 


Var og の 7 = document.qetElementById("o/ め 7): 
977 の た innerHTML = "の 
var な = globaL_db.transaction(["sfo7e7"], "readonly"): 
Var sfo7e7 = が .objectStore( "sfo7e7"): // オブ ジェ クト スト ア 取 得 
Var c の 7S の 77e = nul 
f (な 77/Ze/) { 
Var a9@77ex = s7o7e7.index( "age77ex"): 
イン デック ス 取 得 
/ キー 範囲 (10 か ら 20) を 定義 
Var ん eyg7ge = IDBKeyRange.bound(10, 20): 
cg/7So7 人 eg = ag9@777ex.0penCursor(keyRange): // カー ソル を リク エス | 
} else { 
cg/so7We = so7e7.0penCursor(): // カー ソル を リク エス | 
} 
// 指定 し た 範囲 の 全 件 を 表示 
7so7e7.0nsuccess = function() { 
Var c/S0/ = C/7S の 7 人 We の .result: // カー ソル の 取得 
(cg7so/) { 
Var Mg//e = cg/so/.Valuez // 現在 の 位置 の デー タ 取 得 
Var 7 の = output.insertRow(-1): // able に 行 造 加 
for (varp in Mg//e) { // 取得 し た デー タ の 全 属 性 を 表示 
Var ce/7 = /ow.insertCell(-1): / 行 に モル 追加 
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cell.innerHTML = p+ " :" ェ vValue[p]: // 値 を 設定 


cg7so7.COntinue(): // カー ソル を 次 の 位置 へ 逢 め る 

















※ レ イア ウト は CSS で 指定 し て いま す 





<bodV> 
<form> 

<input id=" 妨 7 が" type="button" onciick="connectDBAsync(1):" value=" デ ー 
タベース 初期 化 "> 

<input id="/pg7ge" type="button" onclick="connectDBAsVnc(2):" value=" 
バー ジョ ン 2 へ アッ プ グ レー ド "> 

<input id="7/Ze/" type="button" onclick="displayData(true):" Value="10 
か ら 20 才 に フィ ルター"> 

<input type="button" onclick="clearData():" Value=" ク リア "> 

<table id="o/ の "></table> 
</form> 
</bodV> 





「10 才 か ら 20 才 に フィ ルター」 ボ タン を 押す と 、age 属 性 に 基づい て デー タ が フィ ルター さ 
れ ま す 。 こ の 処理 で は 再 接続 せ すず に 既存 の 接続 を globaLdb 変 数 を 介し て 利用 し て いま す 。 ま 
た 、 表 示 処 理 で は イン デック ス 、 カ ー ソ ル 、 キ ー 範 囲 が 使用 され て いま す ( 該 当 箇所 は 
displayData 関 数 )。 


age 属 性 を キー に デー タ を 取得 する に は 、age を キー と し た イン デック ス を 使用 し ます 。 デ 
ー タ を 順次 列挙 する に は カー ソル を 利用 し ます 。 範 囲 を 限定 する に は キー 範囲 を 使用 し ます 。 
「IDBKeyRange.bound(10. 20)」 は 10 か ら 20 を 意味 し ます 。 キ ー 範 囲 は get メ ソ ッ ド や 
delete メ ソ ッ ド の 引数 に も 使用 可能 で す 。 


カー ソル は デー タ を 列挙 する た め の オ ブ ジ ェクト で 、 こ の 処理 も 非同期 で す 。 カ ー ソ ル に は 
key 属 性 と value 属 性 が あり 、 現 在 列挙 し て いる デー タ の キー と 値 が 格納 され ます 。continue 
メソ ッ ド を 呼ぶ と 、 カ ー ソ ル が 次 の デー タ に 移動 し た 状態 で 、success イ ベン ト の ハン ドラ が 
再度 呼ば れ ま す 。 
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HIOD 8 
Indexed DB を 操作 し た い 











デー タバ パー ス 初期 人 パー ジミ ン 2 ヘ アッ プ グ レー ド | 10 才 か 520 才 に フィ ルター | が ア 
name : 佐 藤 ge : 20 lmail . c@examplecom 
Iname : 山 ge : 45 回 a@example com 
name : 田中 ge : 15 Imail : b@example com 





















































「 初 期 化 」 ボ タン を クリ ッ ク す る と 、 デ ー タ が 格納 され 一 覧 で 表示 され ます 





Firefox * 


| 
し 


を ww shoetsha.com/book/pc/dic/work/sam で | 圏 -coooge の | W 合 回 ・ 
デー タ パ ー ス 初 骨 (に | パー ジョ ン 2 ヘア ッ プ サレ ー ド | | 10 才 か ら 20 オ に フィ ルター || の ア 
mall ee 
Imall : a@example com ld :0 


Imall : b@examplecom ld -1 


























「 ア ッ プ グレ ー ド 」 ポ タン を クリ ッ ク す る と 、 デ ー タ ベー ス の バー ジョ ン が 2 に な り 、id 列 が 
追加 され ます 


[Indexed DB を 操作 し た い 
| を www shoeisha.com/book/pc ork/sam で | 岡 -coooe の | 合 回 ・ 
に デー5 パ ー ス 初期 人 | パー ジョ ン 2A ア y フ グレ ー ド || 10 オ か ら 20 オ に つ ィ ルター | が ア 


| 違 me : 田 中 ge : 15 lmail . beexamglecom la 1 
Iname 佐藤 ge : 20 Imail . c@examplscom lg:2 























1 「10 才 か ら 20 地 に フィ ルター」 ボ タン を クリ ッ ク す る と 、 年齢 を も と に デー タ が フィ ルター 

| され て 表示 され ます 

| | 3 照 IndexesDB.Open メソ ッ ド ーー P387 objectStore メソ ッ ド ・・・ 2 こ 
| | 洗 守 indexesDB.deleteDataBase メソ ッ ド ・‥…・P387 close メソ ッ ド ーー ドー ーー 8 
| transaction メソ ッ ド ーーー … P389 
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オフ ライ ン 状 態 と | 
キャ ッシュ 状態 を 取得 する | 


アプ リケーション ・ キ ャ ッシュ を 指定 し た うえ で 、 オ ン ラ イン ・ オ フラ イン 状態 の イベ ント 
と 、 キ ャ ッシュ 状態 の イベ ント を 取得 し て 、 そ の 都度 画面 に 出力 し て いま す 。 


E 





注意 点 と し て は 、 ロ ー カ ル 実 行 (「C:\」 や 「file://」 で 始ま る U H L ) で は キャ ッシュ が 有効 に 
な り ま せん 。 必要 に 応じ て サー バー を 用 意 し て くだ さい 。 また 、 サ ー バ ー は 、 マ ニ フ ェ スト フ 
ァイル の MIME タ イプ (text/cache-manifest) に 対応 し て いる 必要 が あり ます 。 


な お 、Firefox で の み 、 オ フラ イン 状態 の 模擬 テス ト が 可能 で す (「firefox」 メ ニュ ー の 「Web 開 
発 」 か ら 「 オ フラ イン 作業 」 を 選択 )。 


CACHE MANIFEST 


# VeTSIOT:z 


# コメ ント 行 で す 。 内 容 を 変え ず に 更新 する 場合 の た め 、 バ ー ジ ョ ン を 記載 し ます 


# 既定 の セク ョ ン は キ + 





# マー フエ ス ド を 指 対象 と な り ます 
sample.Dnd 

NETWORK: 

# キャ ッシュ し な い 対 象 を 指定 【 

# ワイ ルド カー ド 「*」 も 使用 可能 で す 


OfflineAPI_sample.html 





FALLBACK: 


# キャ ッシュ で は な ぐ く 代替 フ ァイル を 使用 する 場合 に 指定 し ます 





#/Online.html /offline.html 


CACHE: 
# 明示 的 に キャ 指定 の セク ショ ン を 開始 し ます 


# CaChe.CS5 
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// 要素 へ の 参照 を 取得 し ます 
Var の 7/77e_s7775 = document.getElementById("o7/77e_s7gZ/s") H 
Var gg の 7 = document.getElementById("o/ の 7"): 








画面 上 に 状況 を 出力 する た め の 関 数 を 定義 
function write(77sg) { 
go/ め 7.innerHTML = s+ "\n" + o7 め の 7.innerHTML: 







} 













オン ライ ン 状 態 変更 の イベ ント 処理 関数 を 定義 
function onoffHandler(e) { 

Var s な 5 = window.navigator.onLine ? "オン ライ ン " : "オフ ライ ン " ツ : 
97777e sg775.innerHTML = s75: 

write( "オン ライ ン 状 態 が 変更 され まし た :" + sts): 







} 








/ 初期 状態 の オン ライ ン 状 態 を 出力 
onoffHandler(): 
















// オン ライ ン ・ オ フラ イン イベ ント に 登録 
window.addEventListener("online", onoffHandler): 
window.addEventListener("offline", onoffHandler): 










// アプ リケーション ・ キ ャ ッシュ の オブ ジェ クト を 取得 
Var cac7e = window.applicationCache: 











数 値 と キャ ッシュ 状態 の イベ ント 名 の 対応 表 
Var 7g7765 = { 

0: "UNCACHED", 1: "IDLE", 2: "CHECKING", 

3: "DOWNLOADING", 4: "UPDATEREADY", 5: "0BSOLETE" 






7 







キャ ッシュ 状態 更新 時 の イ ト 処 理 関数 の 定義 
function statusHandler(e) { 

write(" イ ベン ト 名 :" + e.tVpe): 

write(" キ ャ ッシュ 状態 " + ag77es[cache.status]): 







} 







// キャ ッ 
Var eve7 な =[ 


WW LE 


"checking", "noupdate", "obsolete", "error", 


"downloading", "progress", "updateready", "cached" 


シュ 状態 の イベ ント 名 の 配 多 








に イベ ント に 処理 関数 を 登録 


402 | LOCALDATA&OFFLINE.SAMPLE-03 


for (var7 = 0: 7 < even な fs.length: な +) { 
cache.addEventListener(eve7 な [7], statusHandler): 


} 





※ レ イア ウト は CSS で 指定 し て いま す 


<bodV> 
<div id="o7/7e_s724/5"></diV> 


<1mq src= "sample.Dng"> 
<textarea id="o/ の "></textarea> 
















給 ワラ イン 状態 と キャ ッシュ 状態 .… メ 









キャ ッシュ 状態 :ONCACHED 
| イベ ント 名 :error 

キャ ッシュ 状態 :ONCACHED 
イベ ント 名 :checking 

オン ライ ン 状 態 が 変更 され まし た : オ ン ラ イン 



















オフ ライ ンプ オン ライ ン の 状態 と 、 キ ャ ッシュ の 取得 状況 を 確認 で きま す 。 
Firefox 
FirefoX マ 


} わ ラ イン 状態 と キャ ッシュ 状態 を 取得 し た い 











で || 圏 - coogie 





を ぃ ww.shoeisha.com/book/pc/di 














オン ライ ン 状 態 が 変更 され まし た : 
キャ ッシュ 状態 :UNCACHED 
呈 イベ ント 名 :cached 
キャ ッシュ 状態 :UNCACHED 
イベ ント 名 :progress 
キャ ッシュ 状態 
イベ ント 名 :progress 
キャ ッシュ 状態 :UNCACHED 
イベ ント 名 :downloading 
キャ ッ シ 語り HH 
イベ ント 名 :check ン 
オン ライ ン 状 態 が 変更 され ま し た : 


キャ ッシュ * マ ニ フ ェ スト ーー ドン ーー ・ 
| 
| | 参 照 applicationCache プロ バ パティ ・・・ ・ 
onLine プロ パテ ィ ーーー ド ドー ドー ドー 
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aejKeie【e)N El 


現在 の 位置 情報 を 
1 度 だ け リ クエ スト し た い 


文 = Window.navigator.de0lOcatiOn 人 暫 オ フシ ェクト の 
た 0NKUDRIUWOGIION(SL 人 へ, @] ) を リク エス ト 


娘 …… ジ オロ ケー ショ ン ( 地 理 位置 情報 ) オ ブ ジ ェクト 

$ 取得 成功 時 の コー ル バ ッ ク 関 数 

^…… 取 得 エ ラー 時 の コー ル バ ッ ク 関 数 省略 可能 (次 項 参照) 
@-… 位 置 取得 の 詳細 オブ ショ ン 省略 可能 (次 項 参照 





プロ パテ ィ (geolocation)、 メ ソ ッ ド (getCurrentPosition) 





ユー ザー の 現在 地 を 取得 する に は 、windownavigatorgeolocation に 格納 され て いる ジオ 
ロケ ーション ・ オ ブ ジ ェクト の getCurrentPosition メ ソ ッ ド を 呼び 出し ます 。 


メソ ッ ド 自体 は 取得 処理 の 起動 の み で 終了 し ます が 、 そ の 後 、 位 置 情報 の 取得 に 成功 する と 、 
引数 に 指定 し た 関数 が Position オ ブ ジ ェクト を 引数 に し て 呼び 出さ れ ま す 。 


Position オ ブ ジ ェクト の timestamp 属 性 に は 、UNIXTIME(1970/1/1 か ら の ミリ 秒 単位 の 
索 計 値 ) で 表 さ れ た 取得 時 点 が 格納 され ます 。coords 属 性 に は 、 以 下 の 位置 情報 を 持つ 座標 オ 
ブ ジ ェクト が 格納 され ます 。 


! プロ パテ ィ  ! 解 説 





latitude 紳 度 (単位 : 度数 ) altidueAccuray 高度 の 誤差 範囲 (単位 : メー トル ) 
longitude 経度 (単位 : 度 数 ) heading : 方 角 (単位 : 度数 
altitude 高度 (単位: メー トル ) speed , 速度 (単位 : メー トル 毎秒) 


accuracy 。 座標 の 誤差 団 (単位 : メー トル ) 
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還 


window.navigator.geolocation.getCurrentPosition( function(pos){ 
VarC = /OS.CO0Tds: 


alert( "緯度 は " + c.Iatitude + "経度 は " + c.longitude + "で す 。『): 


}): 
経度 と 繝 度 を 取得 し て いま す 。 














、 と せ て アハ IH さ こさ は 剛一 呈 大 軒 ら 時 





ぁ ょ ブラ ウザ 対応 表 IE10 IE9 13:] Fx Chrome Safari Opera iOS6 Android ェ ー 
No 00 9 。 0 提 | 


] 

| 
上 天 【SAMPIE】 現在 地 情 報 を 取得 する P408 ト | | 
ま ロ 
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現在 位置 を 監視 し 続け た い 


文 = 金 .watchPosition(^[, @, 一 ] ) 時 6 の 放電 を 昌 
例 .clearWatch (X) 指定 し た ID の 双 視 を 終了 


友 …… 位 置 監視 ID 

る …… ジ オロ ケー ショ ン ( 地 理 位置 情報 ) オ ブ ジェ クト 
ム -… 取 得 成功 時 の コー ル バ ッ ク 関 数 

@… 取 得 エ ラー 時 の コー ル バ ッ ンク 関数 省略 可能 
画 …- 位 置 取得 の 詳細 オプ ショ ン 省略 可能 





メソ ッ ド 





定期 的 に 現在 位置 の 変化 を 監視 し た い 場 合 は 、watchPosition メ ソ ッ ド を 使用 し ます 。 引数 
は getCurrentPosition メ ソ ッ ド と 同じ で す 。 


メソ ッ ド 自体 は 監視 ID を 返し て すぐ に 終了 し ます 。 そ の 後 、 現 在 位置 の 変化 を 監視 し 、 変 
化 が ある と 引数 に 指定 し た 関数 が その 都度 呼び 出さ れ ま す 。 監視 を 終わ ら せ る に は 、 開 始 時 に 
メソ ッ ド が 返し た 監視 ID を 引数 に し て clearWatch メ ソ ッ ド を 呼び 出し ます 。 


省略 可能 な 第 2 引数 に は 、 取 得失 敗 時 に 呼び 出す 関数 を 指定 し ます 。 引数 に は エラ ー オ ブ ジ 
ェクト が 渡さ れ ま す 。 エ ラー オブ ジェ クト の code 属 性 に は 失敗 理由 が コー ド で 格納 され ます 
(コー ド 1 は 権限 エラ ー、 コ ー ド 2 は シス テム 内 部 エラ ー、 コ ー ド 3 は タイ ム ア ウ ト )。 


省略 可能 な 第 3 引数 に は 、 位 置 取得 の 詳細 な オプ ショ ン を 、 以 下 の 属 性 を 持つ オブ ジェ クト 
の 形 で 指定 し ます 。 
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プロ パテ ィ ! 解説 


: enableHighAccuracy , true の 場合 、 可 能 な ら 高 精度 な 位置 取得 を 行う 


var ac 77 = navigator.geolocation.watchPosition(callback, 
function(er7){ alert(e7r.message): }, { Hmeout:1000 }): 
詳細 オプ ショ ン 付 き で 、 位 置 情 報 の 監視 を 開始 し て いま す 。 





ょ ブラ ウザ 対応 表 IE10 IE9 IE8 Fx Chrome Safari 
〇 〇 も 3 〇 O 〇 (9 


Opera IiOS6 Android 
〇 〇 O 〇 
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現在 地 情 報 を 表示 する 





現在 地 の 情 報 を 取得 し て 画面 に 表示 させ て いま す 。 初回 表示 時 に は ブラ ウザ や 環境 に よっ て 
表示 は 異な り ま す が 、 位 置 情 報 の 利用 許可 ダイ アロ グ が 表示 され ます 。 


|JavaScript =。。= 
位置 情報 オブ ジェ クト の 取得 
Var 9eo = window.navigator.geolocation: 


// プロ パテ ィ 名 と 表示 ラベ ル の 対応 表 
Var 7g77es = {latitude: " 線 度 :", longitude: "経度 :", 
altitude: "高度 :", heading: "方 角 :", speed: "速度 :"}: 





if (9eo) { // geolocation 対 応 か 判別 


現在 地 取 得 時 コー ル バ ッ ク 関 数 
function successHandler(pos) { 
Var co の 7 の 5 = /O5S.CO07 の s: // 座標 オフ ジェ クト 取得 
Var g7 の 7 = document.qetElementById("o/ め 7): 
+ for (varp in /g77es) { 
座標 オブ ジェ クト の 各 プ ロ パ ティ を 出力 
9 の 7 の の た innerHTML += 7ag77es[] + coo7 の s[p] + "<br>": 
} 
} 





M 現在 地 取得 失敗 時 コー ル バ ッ ク 関 数 
| function errHandler(e/7) { 
報 alert(e/7.code + ":" + er.messadge): 


} 





// 取得 オプ ショ ン 定 義 
Var o/7o7 = {enableHigqhAccuracy: true]}: 


現在 地 取 得 開始 


9eg.qetCurrentPosition (successHandler, errHandler, op797): 
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※ レ イア ウト は CSS で 指定 し て いま す 
<bodV> 
<h3> 現 在 地 の 位置 情報 で す 。</h3> 
<div id="output"></div> 








示 


ぃ ol 





の 





現在 地 の 位置 情報 で す 本 現在 地 の 位置 情報 で す 。 


紳 度 35.775749580534274 
経度 :139.739S664041164 


reo 9 高度 :12.93050048828125 
:139. 方 角 imul 
高度 :null 速度 mn 
方 角 :null 
速度 :null 


an 二 





現在 地 の 位置 情報 が 表示 され ます 。 表示 され 
る 情報 は 対応 する セン サー の 有無 に よ つ て も 
異な り ます 





し 
1 


年 
時 

E 朋 : 欧 geolocation プロ パテ ィ ー・ P404 情 
getCurrentPosition メソッド ーー に ーー P404 報 
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JSON 形式 を 取り 扱い た い 


文 = JSON.stringify() オブ ジェ クト の JSON 文字 列 へ の 変換 
念 = JSON.parse ( 文 ) JSON 文字 列 の オブ ジェ クト へ の 返還 





到 ……JSON(JavaScript 0bject Notation) 形 式 の 文字 列 
@…… オ ブ ジ ェクト 





メソ ッ ド 





オブ ジェ クト は 、 下 記 の よう に [人 」 を 使っ た 書式 で 初期 化す る こと が で きま す 。 
Var obj = Iname:' 田 中 ". age:24|: 


この 例 で は 、name 属 性 が 「 田 中 ] で 、age 属 性 が 24 に な り ま す 。 こ の 書式 は 、 入 れ 子 に する 
こと も で きま す 。 


JSON は 、 こ の 初期 化 の 書式 を も と に オブ ジェ クト を 文字 列 (Unicode、 既 定 で は UTF-8) で 
表現 し た も の で 、 オ ブ ジ ェクト を 保存 ・ 復 元 し た り 、 送 受信 する 場合 に 使用 され ます 。 


た だ し 、 初 期 化 の 書式 と 異な り 、 JSON で は 、 文 字 列 、 数 値 、 真 偽 値 、null 値 と いう 基本 要 
素 と 、 そ れ ら を 要素 と する 配列 また は オブ ジェ クト の み が 使 用 可能 で す 。 また 、 オ ブ ジ ェクト 
の 子 の 階層 で 親 の オブ ジェ クト が 参照 され て いる 場合 も 、 無限 循環 に な る た め 表 現 で きま せん 。 


JSON 形式 か ら の 復元 は 、eval() 関 数 で 文字 列 を javaScript コ ー ド と し て 解釈 する だ け で も 
可能 で す が 、 安 全 性 等 の 考慮 も あり 、 現 在 で は 専用 の メソ ッ ド が 用 意 さ れ て いま す 。 


オブ ジェ クト か ら JSON 形 式 へ の 変換 に は 」SON.stringify) メ ソ ッ ド を 使用 し ます 。 逆 に 、 


JSON 形式 の 文字 列 か ら オ ブ ジ ェクト を 復元 する に は 、 」SON.parse() メ ソ ッ ド を 使用 し ます 。 
変換 時 に 、 オ ブ ジ ェクト に 循環 参照 が あれ ば エラ ー に な り 、 関 数 に つい て は 無視 され ます 。 
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| 
var o/7 = ffid:1, person:tname:"jack", age:25}}: S 
オブ ジェ クト を 初期 化し ます 。 | 0 
var sop = 3SON.stringify(o の ): 形 | 
オブ ジェ クト を ISON に 変換 し ます 。 を 
取 
り 
扱 
い 
た ト 
い 









ょ ブラ ウザ 対応 表 IE10 1 13:】 Fx Chrome Safari Opera iOS6 Android 
〇 O ⑨ 〇 O 〇 O O O 〇 O O 〇 O 


l 参 照 【SAMPLE】 ハッ シュ で ペー ジ 状 態 を 切り 替え る ・・P414 








[HU・ 油 ] 
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CSS セ レク タ 形 式 で 要素 を 取得 し た い 


文 = 例 .querVSelectOT( 人 ) )。 GS セ レク タ に 一 する 要 を 有人 
@ = $.querVSelectorAlL( 人 ) GS セ レク タ に 一 穫 す る すべ て の 要 を 取得 





放 …… 一 致し た 要素 
全 ……document オ ブ ジ ェクト また は 任意 の HTML 要 素 (element) 
ム ……CSS セ レク タ 


@… 一 致し た 要素 の リス ト 





メソ ッ ド 
at 


要素 の 取得 に は 、document.getElementByld や document.getElementsByClassName 
な ど が あり ます が 、 こ れ ら で は id 属性 や class 属 性 を 使っ た 、 ご く 単 純 な 指定 し か 行え ませ ん 。 


そこ で 、CS5 で 「1」 の ブロ ッ ク の 前 に 記載 する 「CSS セ レク タ 」(「div#id」 や 「.class」 な どの 対 
家 指 定 ) を 使用 する こと で 、 和 柔軟 な 指定 を 可能 に し た の が 、Selectors API で す 。 


単 一 の 要素 を 取得 する 場合 は querySelector メ ソ ッ ド の 引数 に 、CSS セ レク タ を 指定 し ます 。 
複数 の 要素 が 一 致し た 場合 は 最初 の 要素 が 返り ます 。 一 致し な けれ ば null が 返り ます 。 


複数 の 要素 を 取得 する 場合 は 、querySelectorAll メ ソ ッ ド を 使用 し ます 。 戻り 値 は 要素 の 
リス ト で 、 配 列 の よう に し て 要素 を 取得 で きま す 。 


どちら の メソ ッ ド も 、document オ ブ ジ ェクト で 呼び 出し た 場合 は ドキ ュ メ ント 全体 が 、 
特定 の 要素 か ら 呼び 出し た 場合 は その 要素 の 内 側 に ある 要素 が 、 対 象 範囲 と な り ま す 。 


Var e/ = document.querySelector("#head, #main, #side"): 


一 致し た 最初 の 要素 を 取得 し て いま す 。 
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ハッ シュ の 変更 イベ ント を 取得 し た い 


window.onhashchanqe = シュ 叶 





到 …… 実 行 す る 命令 (関数 や 関数 名 ) 





イベ ント 





高度 な javaScript の 機能 を 使用 し た ペー ジ で は 、 ペ ー ジ 内 容 の 更新 を 、 サ ー バ ー か ら ペ ー ジ 
を 再 取得 する の で は な く 、 avaScript で 行い た い 場合 が あり ます 。 


この よう な 場合 、 ハ ッシュ (URL の 「# 以 降 ) の み が 異 な る URL へ の 移動 を 、 ペ ー ジ 内 容 の 更 
新 の きっ か け と し て 利用 する と 、 ペ ー ジ 遷移 に 似せ た ユー ザー 体験 を 構築 で きま す 。 ま た 、 こ 
の 場合 、 画 面 状 態 と URL が 対応 する た め 、 画 面 状態 を 再現 する の も 容易 に な り ま す 。 


ハッ シュ の み の 変 更 は window の hashchange イ ベン ト で 取得 し ます 。 この イベ ント の イベ 
ント 引数 に は 、newURL 属 性 と oldURL 属 性 が あり 、 変 更 後 と 変更 前 の URL が 取得 で きま す 。 


window.onhashchange = function(eve7){ 
if(location.hash == "first"){ / 者 (S に 更 され た 場合 


doFirst(eve/.oldURL): 
} else if(location.hash == "second"){ / econd に 変更 され た 場合 
doSecond(eve/ た .oldURL): 


} 


ハッ シュ の 変更 に 応じ て 関数 を 呼び 出し て いま す 。 
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ハッ シュ で ペー ジ 状 態 を | 
切り 替え る | 
KKNKkKkbkbkbktitwbwnwnt 


同じ ペー ジ 内 で ハッ シュ だ け を 切り 替え る リン ク を 用 意 し 、 各 リ ンク を クリ ッ ク す る こと で 
バハ ッシュ が 切り 替わる の に 応じ て (hashchange イ ベン ト )、 画面 の 文字 色 、 背 景色 な ど を 更新 
し て いま す 。 


音 ハ ッシュ で の 画面 状態 は 、 キ ー と 値 の 形式 で 、 専 用 の オブ ジェ クト に 保持 し て いま す 。 画 
面 が 切り 替わる ご と に 、 現 在 の 画面 状態 の 設定 を 、 こ の オブ ジェ クト を JSON 形式 に 変換 し て 
画面 表示 し て いま す 。 


要素 の 取得 に は CSS セ レク タ を 使用 し て いま す 。 





// 各 ペ ー ジ 状態 の 設定 を 格納 し た オブ ジェ クト 
Var se77779s = { 
first: {title: "First', 
style: "color:black:background-color:white: り , 
second: {title: 'Second"' 
style: 'color:green:background-color:black:), 
third: {title: Third' 
style: "color:blue:background-color:black: 


6 


/ 現在 の ハッ シュ に よっ て 画面 を 切り 替え る た め の 関 数 
function c7a7ge57g7 の 5() { 
Var Cc7767 む 
/ ハッ シュ に よっ て 画面 設定 を 取得 
switch (location.hash) { 
case "#first": 
C77677 = se77777 の 5.first: 
break: 
Case "#second": 
C77677 = se7777795.SeCOnd: 
break: 
case "#third": 
C77677 = se77779S.third: 
break: 
default: 
C776777 = se777795.first: 
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break: 


// CSS セ レク タ で 要素 を 取得 

var 777e = document.querySelector("h1#777e"): 

var ogy = document.querySelector(" の gg"): 

Var og の 7 = document.querySelector("div#o/7 の 7 が ): 


// 画面 設定 オブ ジェ クト の デー タ を 要素 に 適用 
7e.innerHTML = c//7e/7 た .Hitle: 

97 の た.innerHTML = JSON.stringify(cg/7e7 が の: 
/ogy.setAttribute("style", co/7e/ た StVle): 


} 


7 





// 初回 読み 込み 時 に ハッ シュ を チェ ッ ク 
window.onload = ca79e57g775: 


ハッ シコ 変更 時 に も 画面 更新 
window.onhashchange = ca79657g775: 





※ レ イア ウト は CSS で 指定 し て いま す 
<bodV> 
<h1 id=" が 7e">First</h1> 
<div> 
<ul> 
<li> <a href="#first">first</a></i> 
<li><a href="#second">second</a></l> 
<li><a href=" 拭 hird">third</a></li> 
</ul> 
</div> 
<h3> 現 在 の ペー ジ 設 定 (5SON 書 式 )</h3> 
<div id="o/ め 7"></div> 
</bodV> 
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の AV 品 時 交 ー ス 4 ロ VS ン 












た smebpoe 4 





First 


*。 first 
* second 


* third 





現在 の ペー ジ 設 定 (JSON 書 式 ) 


("ntle"-"First"."style"-"color-black-background-color-white-"} 


wshoeisha.… の ・ 














8 SON.stringify メ ド P410 
| 照 r P412 
o P413 
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第 3 部 


オプ ジェ クト 


0BJ の LIST 


m ビ ルト イン オブ ジェ クト と ナビ ゲー ター オブ ジェ クト 
昌 DOM 
中 XMLHttDRequest オ ブ ジ ェクト 











OBIECT LIST | 


、 ヒル トイ ン オ ブ ジ ェクト と 
ナビ ゲー ター オブ ジェ クト 





]avaScript の オブ ジェ クト と その メソ ッ ド お よび プロ パテ ィ の 一 覧 で す 。 それ ぞ れ の オブ ジ 
ェクト に は 決め られ た メソ ッ ド と プロ パテ ィ が 用 意 さ れ て いま す ( 詳 し く は p.014 を 参照 )。 ま た 、 
どの オブ ジェ クト に も 属さ な い 処 理 を 実行 する ビル トイ ン 関 数 と 呼ば れる 命令 も あり ます 。 


ピル トイ ン 関 数 (オブ ジェ クト に 属さ な い 関 数 ) 
































関数 
escape() _ 文字 列 を エス ケー ブ 文 字 に エン コー ド す る _ 250 
eval() 数 式 や 文字 列 を JavaScript の 命令 と し て 実行 する 。 249 
る 値 が eval で 評価 で きる 有限 な 値 な ら true、 そ れ 以 外 な ら false を ピ 
isFinite() 返す 
isNaN() 値 が 数 値 で な い 場合 は true、 そ れ 以 外 な ら 人 lse を 返す 251 
Number() 値 を 数 値 に 変換 する 。 変 換 で き な い 場 合 は NaN を 返す _- 
parseFloat() 文字 列 を 浮動 小数 点数 に 変換 する 247 
parseInt() 文字 列 を 指定 の 進数 か ら 整数 に 変換 する 247 
String() 指定 され た 値 を 文字 列 に 変換 する 
unescape() エン コー ド さ れ た 文字 列 を デコ ー ド し て 、 元 の 文字 列 に 戻す る 250 
void() 何 も 値 を 返さ な い 246 





| 
| 
| 


イベ ント ハン ドラ 
























































イベ ント 
onabort 画像 の 読み 込み 中 断 時 に 発生 する テニ ーー 間 130 
了 フォ ー ム エレ メン ト や ウィ ンド ウ か ら フ ォ ー カ ス が 外れ た と き に 
人 発生 する 

有 フォ ー ム の 部 品 ( 入 力 欄 の 文字 列 や メニ ュー で 選択 され る 項目 ) の 了 
CSS 状態 が 変化 し た と き に 発生 する 

onclick マウ ス が 左 ク リッ ク さ れ 、 離 され た と き に 発生 する 134 
oncontextmenu マウ ス の 右 ボ タン が クリ ッ ク さ れ た と き に 発生 する 135 
ondblclick マウ ス が ダブ ルク リッ ク さ れ た と き に 発生 する 134 
onerror 画像 の 読み 込み 失敗 時 に 発生 する 130 
onfocus フォ ー カ ス が 合っ た と き に 発生 する 32 
onkeydown キー が 押さ れ た と き に 発生 する 139 
onkeypress キー が 押さ れ て いる 間 、 断 続 的 に 発生 する 139 
onkeyup キー が 押さ れ て 離さ れ た と き に 発生 する 139 
onload ペー ジ の 読み 込み 完了 時 に 発生 する 28 
onmousedown マウ ス の 左 ボ タン が クリ ッ ク さ れ た と き に 発生 する 134 
onmouseout マウ スカ ー ソ ル が 外れ た と き に 発生 する 133 
onmouseoVer マウ スカ ー ソ ル が 重なっ た と き に 発生 する 133 
onmouseuDp マウ ス の ボタ ン が 離さ れ た と き に 発生 する 34 
onreset reset ボ タン が 押さ れ た と き に 発生 する 136 
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onresize 


オブ ジェ クト の サイ スズ 変更 時 に 発生 する 


131 











onselect 入力 フィ ー ル ド 選 択 時 に 発生 する 138 
onsubmit submit( 送 信 ) ボ タン が 押さ れ た と き に 発生 する 136 
onunload ペー ジ の 切り 替え 時 に 発生 する 128 





Anchor オ ブ ジ ェクト 


document.anchors 
プロ パテ ィ 





length 


ドキ ュ メ ント 中 の アン カー 数 を 参照 する 


230 





Applet オ ブ ジ ェクト 
document.applets 
プロ パテ ィ 





length 


ドキ ュ メ ント 中 の アン カー 数 を 参照 する 





Array オ ブ ジ ェクト 






































プロ パテ ィ 
length 配列 の 要素 数 を 参照 / 設 定 する 168 

メソ ッ ド 
concat() 2 つの 配列 を 連結 する 174 
join() 配列 の 要素 を 指定 し た 区 切り 文字 で 連結 する 174 
Pop() 配列 の 最後 尾 の 要素 を 取り 出す 170 
Push() 配列 の 最後 尾 に 要素 を 追加 する 170 
reverse() 配列 要素 の 並び 順 を 反転 させ る 172 
shift() 配列 の 先頭 の 要素 を 取り 出す 170 
slice() 指定 し た 範囲 の 配列 の 要素 を 取り 出す 174 
sort() 配列 要素 を 並べ 替え る 172 
splice() 配列 の 要素 を 置換 する 174 
unshift() 配列 の 先頭 に 要素 を 追加 する 170 





TUU( エ ロレ アル を シス 


共通 の メソ ッ ド ・ プ ロ パ ティ (D.427) を 参照 。 





FT い (と アル テン 4 80 















































メソ ッ ド 
getDate() 日 を 返す (131) 182 
getDay() 曜日 を 返す (0: 日 6: 土 ) 182 
getFullYear() 4 桁 の 西暦 を 返す 182 
getHours() 時 を 返す (0~23) 185 
getMilliseconds() ミリ 秒 (11000 秒 ) を 返す (0~999) 185 
getMinutes() 分 を 返す (0~59) 185 
getMonth() 月 を 返す (0~11) 185 
getSeconds() 秒 を 返す (0~59) 185 
getTime() 1970 年 1 月 1 日 午前 0 時 か ら の 経過 秒 数 を ミリ 秒 で 返す 186 
getTimezoneOffset() 協定 世界 時 と の 時 差 で 返す 190 
getUTCDate() 協定 世界 時 の 日 で 返す 190 
getUTCDay() 協定 世界 時 の 曜日 で 返す 190 
getUTCFulYear() 協定 世界 時 の 4 桁 の 西暦 で 返す 190 
getUTCHours() 協定 世界 時 の 時 で 返す 190 
getUTCMilliseconds() 協定 世界 時 の ミリ 秒 で 返す 190 
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getUTCMinutes() 協定 世界 時 の 分 で 返す 190 
getUTCMonth() 協定 世界 時 の 月 で 返す 190 
getUTCSeconds() 協定 世界 時 の 秒 で 返す 190 
getYear() 西暦 を 返す 182 
Parse() 1970 年 1 月 1 日 午前 0 時 か ら の 経過 秒 数 を ミリ 秒 で 返す 186 
setDate() 日 を 設定 する 181 
setFullYear() 4 桁 の 西暦 を 設定 する 181 
setHours() 時 を 設定 する 184 
setMilliseconds() ミリ 秒 を 設定 する 184 
setMinutes () 分 を 設定 する 184 
setMonth() 月 を 設定 する 181 
setSeconds() 秒 を 設定 する 184 
setTime () 1970 年 1 月 1 日 午前 0 時 か ら の 経過 秒 数 を ミリ 秒 で 設定 する 
setUTCDate() 協定 世界 時 の 日 で 設定 する 189 
setUTCFulYear() 協定 世界 時 の 4 桁 の 西暦 で 設定 する 189 
setUTCHours() 協定 世界 時 の 時 で 設定 する 189 
setUTCMilliseconds() 協定 世界 時 の ミリ 秒 で 設定 する 189 
setUTCMinutes() 協定 世界 時 の 分 で 設定 する 189 
setUTCMonth() 協定 世界 時 の 月 で 設定 する 189 
setUTCSeconds () 協定 世界 時 の 秒 で 設定 する 189 
setYear() 西暦 を 設定 する 181 
toGMTString() グリ ニッ ジ 標 準 時 で 返す 188 
toLocaleString() ロー カル 時 で 返す 188 
toUTCString() 協定 世界 時 で 返す 188 
UTC() 1970 年 1 月 1 日 午前 0 時 か ら の 経過 秒 数 を ミリ 秒 で 返す 186 

BOSS 間 

プロ パテ ィ 
alinkColor リン ク を 選択 し た 瞬間 の 文字 色 を 参照 / 設 定 する 
bgColor 背景 色 を 参照 設定 する 
cookie クッ キー の 文字 列 を 参照 設定 する 064 
domain ドメイン 名 を 参照 する 060 
fqColor 文字 色 を 参照 / 設 定 す る 
lastModified 最終 更新 日 を 参照 する 059 
tinkColor リン ク の 文字 色 を 参照 設定 する 
location ドキ ュ メ ント の URI を 参照 設定 する 226 
referrer リン ク 元 の URI を 参照 する 238 
title ドキ ュ メ ント の タイ トル を 参照 する 061 
URL 現在 の ペー ジ の URI を 参照 する 226 
vlinkColor 訪問 済み リン ク の 文字 色 を 参照 / 設 定 する 
メソ ッ ド 

clear() ドキ ュ メ ント の 内 容 を 消去 する 
close() Open メ ソ ッ ド で 開始 し た ドキ ュ メ ント の 出力 を 終了 する 057 
getSelection() 選択 され た 文字 を 取得 する 062 
open() ドキ ュ メ ント の 出力 を 開始 する 057 
write() デー タ を 書き 出す 058 
writeln() デー タ を 書き 出し て 改行 する 058 
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は リン 記 




















プロ バテ ィ 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
Value エレ メン ト の 値 を 参照 / 設 定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
click() 自動 的 に クリ ッ ク す る 115 
focus() フォ ー カ ス を 合わ せる 115 


























プロ パテ ィ 
チェ ッ ク 状 態 を 参 照 / 設 定 す る 。 チェ ッ ク さ れ て いる 場合 は true、 
ie され て いな い 場合 は false を 返す 0 
初期 チェ ッ ク 状 態 を 参照 する 。 チ ェ ッ ク さ れ て いる 場合 は true、 
defaultChecked され て いな い 場合 は false を 返す 113 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
Value エレ メン ト の 値 を 参照 設定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
click() 自動 的 に クリ ッ ク す る 115 
focus() フォ ー カ ス を 合わ せる 115 



































プロ パテ ィ 
name エレ メン ト の 名 前 を 参照 する 108 
tVpe エレ メン ト の 種類 を 参照 する 108 
value エレ メン ト の 値 を 参照 / 設 定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
focus() フォ ー カ ス を 合わ せる 115 
select() フィ ー ル ド を 選択 状態 に する 115 
Hidden オ ブ ジ ェクト 。 <inputtypes"hidden'> タ グ で 作成 され る 隠し フィ ー ル ド 。 
プロ パテ ィ 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
value エレ メン ト の 値 を 参照 設定 する 114 

















プロ パテ ィ 
初期 選択 状態 を 参照 する 。 選 択 さ れ て いる 場合 は true、 さ れ て い 
defaultSelected な い 場合 は false を 返す 113 
index 選択 項目 の 参照 番号 を 参照 する 
salacted 選択 状態 を 参照 する 。 選択 され て いる 場合 は true、 さ れ て いな い 1 
合 は false を 返す 
text 選択 メニ ュー の 項目 を 参照 / 設 定 する 114 
Value エレ メン ト の 値 を 参照 / 設 定 する 114 
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メソ ッ ド 

















































































































blur() フォ ー カ ス を 外す 115 
focus() フォ ー カ ス を 合わ せる 115 
selet() 文字 を 選択 状態 に する 115 
_Radio オ ブ ジ ェクト 。 <inputtypes'fadio'> で 作成 さも る ラジ オ ボ タン 。 
プロ パテ ィ 
Cieeke チェ ッ ク 状 態 を 参照 / 設 定 する 。 チェ ッ ク さ れ て いる 場合 は true、 111 
され て いな い 場 合 は false を 返す 
初期 チェ ッ ク 状 態 を 参照 する 。 チェ ッ ク さ れ て いる 場合 は true、 
defaultChecked され て いな い 場合 は false を 返す 113 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
value エレ メン ト の 値 を 参照 / 設 定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
ciick() 自動 的 に クリ ッ ク す る 115 
focus() フォ ー カ ス を 合わ せる 115 
_Reset オ ブ プ ジ ェ クト 。。 <inputtyper"reset"> タ グ で 作成 され る リセ ッ ト ボ タン 。 
プロ パテ ィ 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
Value エレ メン ト の 値 を 参照 設定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
ctick()_ 自動 的 に クリ ッ ク す る 115 
focus() フォ ー カ ス を 合わ せる 115 
、Select オ プ ジ ェ クト 。 <selec> タ グ で 作成 され る ブル ダウ ン ま た は り ス ト ポ ックス 。。 
プロ パテ ィ 
length 選択 項目 の 数 を 参照 する 108 
name エレ メン ト の 名 前 を 参照 する 108 
options 選択 状態 を 参照 する 
selectedIndex 選択 され て いる 項目 の 参照 番号 を 参照 する 112 
type エレ メン ト の 種類 を 参照 する 108 
Value エレ メン ト の 文字 列 を 参照 / 設 定 す る 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
focus() フォ ー カ ス を 合わ せる 115 
、Submit オ プ ジ ェ クト 。 <inputtype-"submit'> タ グ で 作成 され る 送信 ボタン 。 
プロ パテ ィ 
name エレ メン ト の 種類 を 参照 する 108 
type エレ メン ト の 名 前 を 参照 する 108 
Value エレ メン ト の 値 を 参照 設定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
click() 自動 的 に クリ ッ ク す る 115 
focus() フォ ー カ ス を 合わ せる 115 
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プロ パテ ィ 
defaultValue 初期 文字 列 を 参照 する 114 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
value エレ メン ト の 値 を 参照 設定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
click() 自動 的 に クリ ッ ク す る 115 
focus() フォ ー カ ス を 合わ せる 115 
select() 文字 を 選択 状態 に する 115 
_Textarea オ ブ ジ ェクト <textarea> タ グ で 作成 され る 複数 行 の 入力 フィ イールド 。 
プロ パテ ィ 
defaultValue 初期 文字 列 を 参照 する 114 
name エレ メン ト の 名 前 を 参照 する 108 
type エレ メン ト の 種類 を 参照 する 108 
value エレ メン ト の 値 を 参照 設定 する 114 
メソ ッ ド 
blur() フォ ー カ ス を 外す 115 
focus() フォ ー カ ス を 合わ せる 115 
select() 文字 を 選択 状態 に する 115 





Embed オ ブ ジ ェクト 






プロ パテ ィ 















































length ドキ ュ メ ント 中 の プラ グイ ン 数 を 参照 する 065 
本 二 > 
プロ パテ ィ 
clientX 表示 領域 上 の マウ ス の x 座標 を 参照 / 設 定 する 142 
clientY 表示 領域 上 の マウ ス の y 座標 を 参照 / 設 定 する 142 
keycode 入力 され た キー の キー コー ド (文字 コー ド ) を 参照 する 140 
layerX イベ ント が 発生 し た レイ ヤ 上 の X 座 標 を 返す 
layerY イベ ント が 発生 し た レイ ヤ 上 の Y 座 標 を 返す 
pageX イベ ント が 発生 し た ペー ジ 上 の X 座 標 を 返す 142 
pageY イベ ント が 発生 し た ペー ジ 上 の Y 座 標 を 返す 142 
screenX イベ ント が 発生 し た 画面 上 の X 座 標 を 返す 142 
screenY イベ ント が 発生 し た 画面 上 の Y 座 標 を 返す 142 
target イベ ント の 発生 元 と な る オブ ジェ クト を 返す 141 
type イベ ント の 種類 を 参照 する 141 
X マウ ス の x 座 標 を 参照 する 142 
y マウ ス の y 座 標 を 参照 する 142 
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プロ パテ ィ 
action フォ ー ム の 送信 先 を 参照 / 設 定 する 106 
encoding フォ ー ム 送信 時 の エン コー ド 方 式 を 参照 / 設 定 する 106 
length ドキ ュ メ ント 中 の フォ ー ム の 数 、 フ ォ ー ム 中 の エレ メン ト の 数 を 104 
参照 する 
method フォ ー ム の 送信 形式 を 参照 / 設 定 する 106 
name フォ ー ム の 名 前 を 参照 する 104 
target フォ ー ム 送信 後 の タ ー ゲ ッ ト ウ ィ ン ド ウ を 参照 / 設 定 する 106 
メソ ッ ド 
reset() フォ ー ム 内 容 を リセ ッ ト す る 110 
submit() フォ ー ム 内 容 を 送信 する 110 























プロ パテ ィ 
location フレ ー ム の URI を 参照 する 
name フレ ー ム 名 を 参照 / 設 定 する 
Parent 親 フレ ー ム を 参照 する _ 
self 自分 自身 の フレ ー ム を 参照 する 
top 最上 位 の フレ ー ム を 参照 する 
window.frames 
プロ パテ ィ 
length ドキ ュ メ ント 中 の フレ ー ム の 総数 を 参照 する 





※ ほ か 、Window オ ブ ジ ェクト の プロ パテ ィ や メソ ッ ド を 使用 する こと が 可能 









































プロ バテ ィ 
arduments 関数 に 渡さ れる 引数 を 参照 する 281 
arity 関数 に 渡さ れる 引数 の 数 を 参照 する 281 
caller 呼び 出し 元 の スク リプ ト の 内 容 を 参照 する 281 
メソ ッ ド 
apPply() 関数 内 か ら ほか の 関数 を 呼び 出す 。 任意 の 数 の 引数 を 指定 で きる 282 
call() 関数 内 か ら ほか の 関数 を 呼び 出す 282 
5 
プロ バテ ィ 
length 履歴 の 数 を 参照 する 239 
メソ ッ ド 
back() 1 つ 前 の ペー ジ に 戻る 240 
forward() 1 つ 後 の ペー ジ に 進む 240 
dg0() 指定 し た 数 だ け 前 後 の 履歴 に 移動 する 240 
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Imaqe オ ブ ジ ェクト 
































プロ パテ ィ 
border 画像 の ボー ダー の 太 さ を 参照 設定 する 
complete 画像 の 読み 込み が 完了 し た か 参照 し 、 画 像 が 完全 に 読み 込ま れ て い 224 
る 場合 は true、 読 み 込 まれ て いな い 場 合 は false を 返す 
height 画像 の 高 さ を 参照 設定 する 222 
hspace テキ スト と 画像 の 左右 の 間隔 を 参照 / 設 定 する 
lowsrc 低 解 像 度 用 画像 の URI を 参照 / 設 定 する 223 
name 画像 の 名 前 を 参照 する 222 
src 画像 の URI を 参照 / 設 定 する 223 
VSDaCe テキ スト と 画像 の 上 下 の 間隔 を 参照 設定 する 
width 画像 の 幅 を 参照 設定 する 222 
document.images 
プロ パティ 
length ドキ ュ メ ント 中 の 画像 の 数 を 参照 設定 する 220 











メソ ッ ド 
stringify() オブ ジェ クト を JSON 文字 列 に 変換 する 410 
Parse() JSON 文字 列 を オブ ジェ クト に 変換 する 410 





Link オ ブ ジ ェクト ・Area オ ブ ジ ェクト 
































プロ パテ ィ 
hash リン ク 先 の アン カー を 参照 / 設 定 す る 
host リン ク 先 の ホス ト 情 報 を 返す 231 
hostname リン ク 先 の バス 名 を 参照 する 231 
href リン ク 先 また は 現在 の ペー ジ の URI を 参照 / 設 定 す る 228 
pathname リン ク 先 の ベー ジ の パス 名 を 参照 する 231 
port リン ク 先 の ポー ト 番 号 を 参照 する 231 
protocol リン ク 先 の プロ トコ ル を 参照 する 231 
search CGI な ど に 渡さ れる サー チ 部 分 を 参照 設定 する 
target ター ゲッ トウ ィ ン ド ウ を 参照 / 設 定 する 229 
document.iinks 
プロ パテ ィ 
length ドキ ュ メ ント 中 の リン ク 数 を 参照 する 228 





※length プ ロ パ ティ は Link オ ブ ジ ェクト の み 





WT リリ レ アル テン 4 ( 









































プロ パテ ィ 
hash 現在 の アン カー を 参照 、 ま た は 指定 し た アン カー ハム 移動 する 
host 指定 し た ペー ジ の ホス ト 情 報 を 返す 231 
hostname 指定 し た ペー ジ の ホス ト 名 を 参照 する 231 
href 指定 し た ペー ジ の URI を 参照 / 設 定 する 228 
pathname 指定 し た ペー ジ の パス 名 を 参照 する 231 
port 指定 し た ペー ジ の ポー ト 番 号 を 参照 する 231 
protocol 指定 し た ペー ジ の プロ トコ ル を 参照 する 231 
search (CGI な ど に 渡さ れる サー チ 部 分 を 参照 / 設 定 す る 

メソ ッ ド 
reload() ペー ジ を リロ ー ド (再読 み 込み ) す る 227 
replace() の URI を 変更 し 、 ペ ー ジ を 移動 する 232 
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プロ パテ ィ 
E 自然 対数 の 底 e を 返す ( 約 2.718) 262 
LN10 10 の 自然 対数 を 返す ( 約 2.302) 262 
LN2 2 の 自然 対数 を 返す ( 約 0.693) 262 
LO0G10E e の 常用 対数 を 返す ( 約 0.434) 262 
L0G2E e の 2 を 底 と する 対数 を 返す ( 約 1.442) 262 
PI 円 周 率 ( 約 3.14159) を 返す 259 
SQRT1_2 2 の 平方 根 の 半分 の 値 を 返 す ( 約 0.707) 265 
SQRT2 2 の 平方 根 を 返す ( 約 1.414) 265 
メソ ッ ド 
abs() 絶対 値 を 求め る 258 
acos() 逆 奈 弦 ( ア ー ク ・ コ サイ ン ) を 求め る _ 260 
asin () 逆 正 纏 (アー ク ・ サ イン ) を 求め る 260 
atan () 逆 正 接 (アー ク ・ タ ンジ ェ ント ) を 求め る 260 
atan2() 逆 正 接 ( ア ー ク ・ タ ンジ ェ ン ト ) を 求め る 260 
ceil() 小数 点 以下 を 切り 上 げ 、 数 値 を 整数 に 変換 する 257 
cos() 奈 弦 (コサイン ) を 求め る 260 
eXP() e の べき 乗 を 求め る 262 
floor() 小数 点 以 下 を 切り 捨て 、 数 値 を 整数 に 変換 する 257 
log() e を 底 と する 対数 を 求め る 262 
max() 引数 に 指定 し た 複数 の 数 値 の うち 、 最大 の 数 値 を 得る 264 
min() 引数 に 指定 し た 複数 の 数 値 の うち 、 最 小 の 数 値 を 得る 264 
pow() べき 乗 を 求め る 262 
random () 0 か ら 1 未 満 の 乱数 を 発生 させ る 256 
round() 小数 点 以下 の 四捨五入 を 行い 、 数 値 を 整数 に 変換 する 25Z 
sin() 正弦 (サイ ン ) を 求め る 260 
sqrt() 平方 根 を 返す 265 
tan () 正 接 (タン ジェ ント ) を 求め る 260 


MimeTVvpe オ ブ ジ ェクト 

















プロ パテ ィ 
description MIME タ イプ の 詳細 情報 を 参照 する 214 
enabledPlugin プラ グイ ン が 使用 可能 な ら ture、 使 用 不可 な ら false を 返す 214 
suffixes プラ グイ ン の 拡張 子 を 参照 する 214 
type MIME タ イプ を 参照 する 214 
document.inks 5 
プロ パテ ィ 
length MIME タ イプ の 数 を 参照 する 214 





DENALE い OU と と P た た ンス 























プロ パテ ィ 
appCodeName ブラ ウザ の コー ド 名 を 参照 する 211 
appName ブラ ウザ 名 を 参照 する 210 
appVersion ブラ ウザ の バー ジョ ン を 参照 する 210 
browserLanguage ブラ ウザ の 言語 環境 を 参照 する 211 
language ブラ ウザ の 言語 環境 を 参照 する 211 
platform プ ブラット フォ ー ム を 参照 する 211 
userAqent ユー ザー エー ジェ ント 名 を 参照 する 211 
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メソ ッ ド 
javaEnabled() Java が 使用 可能 な 場合 は true、 使 用 不可 の 場合 は false を 返す 212 








Number オ ブ ジ ェクト 

















プロ パテ ィ 
MAX_VALUE JavaScript で 使用 可能 な 最大 値 を 参照 する 266 
MIN_VALUE JavaScript で 使用 可能 な 最小 値 を 参照 する 266 
NaN 数 値 以 外 で ある こと を 表す 266 
NEGATIVE_INFINITY 負 の 無限 大 を 参照 する 266 
POSITIVE_INFINITY 正 の 無限 大 を 参照 する 266 





0bject オ ブ ジ ェクト (共通 の メソ ッ ド ・ プ ロ パ ティ ) 








プロ パティ 
constructor オブ ジェ クト を 作成 し た 関数 を 参照 する 273 
prototype オブ ジェ クト に プロパティ や メソ ッ ド を 追加 する 





※Constructor プ ロ パ ティ と prototype プ ロバ ティ は 、Array、Boolean、Date、Function、Number、 
0bject、RegExp、Strind オ ブ ジ ェクト が 持つ プロ パテ ィ 




















メソ ッ ド 
toSource () 指定 し た 関数 や オブ ジェ クト の 内 容 を 返す 274 
toStrng() 数 値 を n 進 数 表記 の 文字 列 に 変換 する 248 
unwatch () 指定 し た プロ パテ ィ の 監視 を 中 止 する 
watch () 指定 し た プロ パテ ィ を 監視 する 
value0f() オブ ジェ クト の 値 を 返す 。 273 





Plugin オ ブ ジ ェクト 



























































プロ パテ ィ 
description ブラ グイ ン の 詳細 情報 を 参照 する 213 
filename ブラ グイ ン の ファ イル 名 を 参照 する 213 
name プラ グイ ン の 名 前 を 参照 する 213 
document.plugins/navigator.plugins 
プロ パテ ィ 
length ブラ グイ ン 数 を 参照 する 213 
プロ パテ ィ 
$1..…,$9 一 致し た 文字 列 を 参照 する 
global 完全 一 致 を 検索 する 場合 は true、 検 索 し な い 場 合 false を 返す 288 
ignoreCase 大 文字 、 小 文字 を 区 別 する 場合 true、 区 別 し な い 場 合 flse を 返す 288 
lastIndex 検索 の 開始 位置 を 参照 設定 する 291 
lastMatch 最後 に 一 致し た 文字 列 を 参照 する ($& で も 可 ) 289 
lastParen 最後 に 一 致し た グル ー プ の 文字 列 を 参照 する ($+ で も 可 ) 289 
leftContext 最後 に 一 致し た 文字 列 より 前 の 文字 列 を 参照 する ($ で も 可 ) 290 
multiline 改行 コー ド を 無視 する か どう か を 参照 設定 する ($* で も 可 ) 288 
rightContext 最後 に 一 致し た 文字 列 よ り 後ろ の 文字 列 を 参照 する ($ で も 可 ) 290 
SOuTCe バタ ー ン 文字 列 を 参照 する 291 
メソ ッ ド 
compile() パタ ー ン 文字 列 を 設定 "変更 する 291 
exec() 検索 を 実行 する 291 
input() 検索 する 文字 列 を 参照 設定 する 291 
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一 致す る 文字 列 が 含ま れ て いる か どう か を 調べ 、 あ っ た : 


合 は 





























































































































00 true、 な か っ た 場合 は false を 返す 3 
プロ パテ ィ 

availHeight 有効 な 領域 の 高 さ を 参照 する 098 

availWidth 有効 な 領域 の 幅 を 参照 する 098 

availLeft 有効 な 左端 の X 座 標 を 参照 する 098 

availTop 有効 な 上 端 の Y 座 標 を 参照 する 098 

colorDepth 表示 で きる 色 数 を 参照 する 101 

height モニ タ の 高 さ を 参 照 す る 100 

pixelDepth オフ スク リー ン の 色 深 度 を 参照 する 101 

width モニ タ の 幅 を 参照 する 100 
プロ パテ ィ 

length 文字 列 の 長 さ を 参 照 する 198 
メソ ッ ド 

anchor() 文字 列 に アン カー 名 を 設定 する 199 

big() 文字 列 を 大 きく する 

blink() 文字 列 を 点滅 させ る 

bold() 文字 列 を 太字 に する 

charAt() 指定 し た 位置 の 文字 を 抜き 出す 204 

charCodeAt() 指定 し た 位置 の 文字 を Unicode の 値 に 変換 する 203 

concat() 文字 列 を 結合 する 205 

fixed() 文字 列 を 等 幅 フ ォ ン ト に する 

fontcolor() 文字 列 の 色 を 設定 する 

fontsize() 文字 列 の サイ ズ を 設定 する 

fromCharCode () Unicode の 値 を 文字 に 変換 203 

index0f() 文字 列 を 検索 する 202 

italics() 文字 列 を 斜体 に する 

lastIndex0f() 文字 列 を 後ろ か ら 検索 する 202 

iink() 文字 列 に リン ク を 設定 する 199 

match() 検索 し 、 一 致し た 文字 列 を 返す 293 

replace() 文字 列 中 の 指定 し た 文字 列 を 置換 する 293 

search() 文字 列 の 検索 を 行い 、 一 致し た 位置 を 返す 293 

slice() 指定 し た 範囲 の 文字 列 を 抜き 出す 205 

small() 文字 列 を 小さ くす る 

spHit() 文字 列 を 区 切り 文字 で 分 割 し 、 配 列 と し て 返す 201 

strike() 文字 列 を 打 消 し 線 付き に する 

sub() 文字 列 を 下 付き 文字 に する 

substr() 指定 し た 位置 か ら 指定 し た 文字 数 分 の 文字 列 を 抜き 出す 205 

substring() 指定 し た 範囲 の 文字 列 を 抜き 出す 205 

sup() 文字 列 を 上 付き 文字 に する 

toLowerCase() アル ファ ベッ ト を 小文字 に 変換 する 200 

toUpperCase() アル ファ ベッ ト を 大 文字 に 変換 する 200 
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プロ パテ ィ 
(bsed ウィ ンド ウ が 閉じ て いる か を 参照 し 、 閉 じ ら れ て いた 場合 は true、 0Z 
開い て いた 場合 は false を 返す 
defaultStatus ステ ー タ スバ パー の デフ ォ ル ト の 文字 列 を 参照 / 設 定 す る 
innerHeiqht ウィ ンド ウ の 内 側 ( 表 示 領 域 ) の 高 さ を 参照 設定 する 080 
innerWidth ウィ ンド ウ の 内 側 (表示 領域 ) の 幅 を 参照 設定 する 080 
length ウィ ンド ウ 内 に ある フレ ー ム の 総数 を 参照 する 
name ウィ ンド ウ 名 を 参照 / 設 定 する 07Z 
opener 現在 の ウィ ンド ウ を 開い た 元 の ウィ ンド ウ を 参照 する 07Z7 
outerHeiqht ウィ ンド ウ の 外側 (ウィ ンド ウ 全 体 ) の 高 さ を 参照 設定 する 080 
outerWidth ウィ ンド ウ の 外側 (ウィ ンド ウ 全 体 ) の 幅 を 参照 / 設 定 する 080 
pageXOffset 横 方 向 の オフ セッ ト を 参照 / 設 定 す る 082 
pageYOffset 縦 方 身 ハオ フ セ ッ ト を 参照 / 設 定 す る 082 
status ステ ー タ スバ ー の 文字 列 を 参照 / 設 定 する 
メソ ッ ド 
alert() 警告 ダイ アロ グ を 表示 する 050 
back() 1 つ 前 の ペー ジ に 戻る 083 
blur() ウィ ンド ウ か ら フ ォ ー カ ス を 外す 132 
clearInterval() SetInterval メ ソ ッ ド で 設定 し た タイ マー を 解除 する 165 
clearTimeout() SetTimeout メ ソ ッ ド で 設定 し た タイ マー を 解除 する 165 
close() ウィ ンド ウ を 閉じ る 057 
confim() 確認 ダイ アロ グ を 表示 し 、[0K] ボ タン で true、 そ れ 以 外 の 場合 は 051 
false を 返す 
find() 指定 し た 文字 列 を 検索 する 083 
focus() ウィ ンド ウ に フォ ー カ ス を 合わ せる 132 
forward() 1 つ 先 の ベ ページ に 進む 083 
home() ホー ムペ ー ジ に 移動 する 083 
moveBy() ウィ ンド ウ の 表示 位置 を 指定 し た 距離 だ け 移動 させ る 078 
moveTo () ウィ ンド ウ の 表示 位置 を 指定 し た 座標 に 移動 させ る 078 
open() 新しい ウィ ンド ウ を 開く 057 
print() 印刷 する 083 
prompt() 文字 入力 ダイ アロ グ を 表示 し 、[0K] ポ タン で 入力 され た 文字 列 、 052 
それ 以外 で は null を 返す 
resizeBy() ウィ ンド ウ の サイ ズ を 指定 し た 分 だ け 現 在 の サイ ズ か ら 変 更 する 079 
resizeTo() ウィ ンド ウ の サイ ズ を 指定 し た 幅 と 高 さ に 変更 する 079 
scroll() ペー ジ の 内 容 の 表示 開始 位置 を 指定 し た 座標 まで 移動 させ る 081 
scrollBy () ペー ジ の 内 容 の 表示 開始 位置 を 指定 し た 距離 だ け 移動 させ る 081 
scrollTo() ペー ジ の 内 容 の 表示 開始 位置 を 指定 し た 座標 まで 移動 させ る 081 
setInterval() 一 定時 間 ご と に 関数 を 呼び 出す タイ マー を 設定 する 165 
setTimeout() 一 定時 間 後に 関数 を 呼び 出す タイ マー を 設定 する 164 
stop() 読み 込み を 中 止 する 083 





OBIECT LIST01 | 429 














OBIECT LIST.02 































































































DOM 
| 
el 
DOM(Document Object ModeD) の メソ ッ ド お よび プロ パテ ィ で す 。 ここ で 紹介 する の 
| は 本 書 で 扱っ た も の に 限定 し て いま す 。 
| 
2 
| プロ パテ ィ 
| attributes 属性 の リス ト を 参照 する 310 
childNodes 子 ノ ー ド の リス ト を 参照 する 302 
firstChild 最初 の 子 ノー ド を 参照 する 302 
innerHTML 要素 の HTML/XHTML タ グ と 内 容 を 参照 / 設 定 す る 308 
innerText ノー ド の 文字 列 を 参照 設定 する 308 
lastChild 最後 の 子 ノー ド を 参照 する 302 
nextSibiling 次 の ノー ド を 参照 する 302 
nodeName ノー ド 名 を 参照 する 308 
nodeType ノー ド の 種類 を 参照 する 308 
nodeValue ノー ド の 値 を 参照 / 設 定 する 308 
parentNode 親 ノ ー ド を 参照 する 302 
previousSibiling 前 の ノー ド を 参照 する 302 
tagName 要素 名 を 参照 する 308 
| textContent ノー ド の 文字 列 を 参照 設定 する 308 
メソ ッ ド 
appendChild() 子 ノ ー ド を ノー ド の 未 尾 に 追加 する 306 
cloneNode() ノー ド を 複製 する 306 
createAttribute() 属性 を 作成 する 312 
createElement() 要素 ノー ド を 作成 する 304 
createTextNode () テキ スト ノー ド を 作成 する 304 
getAttribute() 属性 の 値 を 取 得する 310 
getAttributeNode() 属性 ノー ド を 取得 する 310 
| getElementById() ID を 持つ 属性 ノー ド を 取得 する 300 
getElementsByName() 指定 し た name 属 性 値 を 持つ 要素 を 取り 出し 、 配列 と し て 返す 300 
| getElementsByTagName() 指定 し た 要素 名 の 要素 を 取り 出し 、 配列 と し て 返す 300 
hasAttribute () 指定 し た 属性 が ある 場合 は true、 な い 場合 は false を 返す 310 
| hasAttributes() 属性 が ある 場合 は true、 な い 場 合 は false を 返す 310 
| hasChildNodes() 子 ノー ド が ある 場合 は ture を 、 な い 場 合 は 信 lse を 返す 302 
| insertBefore() 特定 の 位置 に 子 ノー ド を 追加 する 306 
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item() 参照 番号 の ノー ド を 取得 する 302 
querySelector() (CSS セレ クタ に 一 致す る 要素 を 取得 する 412 
querySelectorAl() (CSS セレ クタ に 一 致す る すべ て の 要素 を 取得 する 412 
removeAttribute() 要素 か ら 属性 を 削除 する 314 
removeAttributeNode() 属性 ノー ド を 削除 する 314 
removeChild() 子 ノー ド を 削除 する 305 
replaceChild() 子 ノ ー ド を 置換 する 305 
setAttribute() 属性 と 値 を 追加 する 312 
setAttributeNode() 属性 ノー ド を 追加 する 312 
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XMLHttpRequest オ ブ ジ ェクト 





HTTP プ ロト コル を 使っ て 非同期 通信 同期 通信 を 行う XMLHttpRequest オ ブ ジ ェクト の メ 
ソ ッ ド お よび プロ パテ ィ の 一 覧 で す 。 な お 、Internet Explorer 7 より 前 の バー ジョ ン で は 
XMLHTTP を 利用 し ます が (p.333)、 持 っ て いる プロ パテ ィ や メソ ッ ド は ほぼ 同じ で す 。 


(と ウル オン 









































プロ パテ ィ 
onreadystatechange 通信 状態 が 変化 し た と き に 呼び 出さ れる 処理 を 指定 する 338 
readyState 。 現在 の 通信 状態 を 参照 する - 337 
responseText テキ スト デー タ と し て 取得 し た レス ポン ス を 参照 する 335 
responseXML XML オブ ジェ クト と し て 取得 し た レス ポン ス を 参照 する 335 
status ステ ー タ スコ ー ド を 参照 する ーー 337 
statusText ステ ー タ ステ キス ト を 参照 する 337 

メソ ッ ド 
abort() 通信 を 中 止 す る 336 
getAUIResponseHeaders() すべ て ! の レス ポン ス ヘ ッ タ を 返す - 339 
getResponseHeader() 指定 し た レス ポン スペ ヘッダ を 返す 339 
open() リク エス ト を 初期 化す る 334 
send() リク エス ト を 送信 する 334 
setRequestHeader() リク エス ト ヘ ッ タ を 設定 する 回 340 
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付 鍵 
APPENDIX 


スタ イル プロ パテ ィ 一 覧 
中 javaScript イ ン デ ックス 
m 用 語 イ ン デ ックス 




















スタ イル プロ パテ ィ イィ 一覧 





]avaScript で 利用 され る スタ イル プロ パテ ィ の 一 覧 で す 。 プ ロバ ティ の 名 前 や 値 は 基本 的 に 
CSS の プロ パテ ィ と 対応 し て いる た め 、 一 覧 で も CSS の プロ パテ ィ を 併記 し まし た 。 


トペ ボソ アル = リ A て は 
テキ スト 
letter-spacing 


スタ イル プロ パテ ィ 


letterSpacing 


説明 


文字 間隔 


値 の 指定 方 法 


normal 
実数 値 十 単 位 





_Hine-height 


iineHeight 


行 の 高 さ 


normal 
実数 値 十 単位 
実数 値 

パー セン ト 値 +% 





text-align 


textAlign 


行 揃え 


left 
riqht 
center 
justifv 





text-decoration 


textDecoration 


テキ スト の 装飾 


none 
underline 
overline 
Hine-through 
bliink 





text-indent 


textIndent 





text-transform 


textTransform_ 


イン デン ト 


実数 値 十 単位 
パー セン ト 値 +% 





単語 の 表記 方 法 


none 
capitalize 
UPDDercase 
lowercase 





Vertical-align 


verticalAlign 





baseiine 
top 
middle 
bottom 
sub 
Super 





white-space 
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whiteSpace 


空白 処理 





normal 
nowrap 





メメ ^。 く トト 


CSS の プロ パテ ィ 


スタ イル プロ パテ ィ 


説明 


値 の 指定 方 法 
Pre 





word-spacind 


wordSpacing 


単語 間隔 





normal 
実数 値 十 単位 





font 


font 


フォ ント の プロ パテ ィ の 
一 括 指定 


font-style font-variant 
font-weight 
font-size/line-height 
font-family の 各 値 





font-family 


fontFamily 


使用 する フォ ント 


フォ ント ファ ミリ ー 名 
総称 ファ ミリ ー 名 (senif、 
sans-Serif、cursive、 
fantasy、monospace) 





font-size 


fontSize 


フォ ント サイ ズ 


xx-Small、 x-small、 small、 
medium、 large、 x-large、 
xx-larqe 

largersmaller 
実数 値 十 単位 

パー セン ト 値 +% 





font-style 


fontStvle 


付 体 


italic 
oblique 
normal 





font-variant 


fontVariant 


スモ ー ル キャ ッ プ 


normal 
small-caps 





font-weight 


fontWeight 


フォ ント の 太 さ 


数 値 (100、 200、 300、 400、 
500、 600、700、 800、 900) 
normal 

bold 

bolderlighter 





backqground 


backgqround 


背景 の プロ パテ ィ の 
一 括 指 定 


backqround-color 
background-image 
background-repeat 
backqround-attachment 
background-position の 名 値 





backqround-attachment 


backqroundAttachment 








背景 画像 の 固定 











scroll 
fixed 





background-color 


backqroundColor 


背景 色 


色 
transparent 





backqround-image 


backgroundImage 


背景 画像 


URI 
none 





background-position 


backgroundPosition 


背景 画像 の 位置 


実数 値 十 単位 
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CSS の プロ パテ ィ と と - と の アル リル ン 説明 値 の 指定 方 法 
パー セン ト 値 +% 
left,centerright/ 
top,centerbottom 
background-repeat backqroundRepeat 背景 画像 の 繰り 返し 方 法 repeat 
repeat-x 
Tepeat-V 
no-repeat 
color ー color 文字 色 色 
border border ボー ダー の 一 括 指定 border-width 
border-style 
border-color の 各 値 
_border-color borderColor ボー ター の 色 の 一 括 指定 負 
transparent 
border-style borderStyle ボー タダ ー の 種類 の 一 括 指定 none 
hidden 
dotted 
dashed 
solid 
double 
groove 
ridge 
inset 
outset 
porder-top borderTop ボー ダー ご と の border-width _ 
プロ パテ ィ の ーー 丘 指 定 border-style 
border-color の 各 値 
border-right borderRight 
border-bottom borderBottom 
border-left borderLeft 
border-top-color borderTopColor 上 下 左右 の ボー ダー の 色 色 
border-right-color borderRightColor transparent 
border-bottom-color borderBottomColor 
border-left-color borderLeftColor 
border-top-stvle borderTopStyle 上 下 左右 の ボー ダー の 種類 none 
border-right-style borderRightStyle hidden 
border-bottom-style borderBottomStyle dotted 
border-left-style borderLeftStyle dashed 
solid 
double 
groove 
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CSS の プロ パテ ィ シレ と と の | アル ョ リム 6 上 
ridge 
inset 
outset 
border-top-width borderTopWidth 上 下 左右 の ボー ダー の 幅 thin 
border-right-width borderRightWidth medium 
border-bottom-width borderBottomWidth thick 
border-left-width borderLeftWidth 実数 値 二 単位 
border-width borderWidth ボー ダー の 幅 の 一 括 指定 thin 
medium 
thick 
実数 値 二 単位 
_height 、 height 内 容 領域 高 さ 実数 値 和 単位 
パー セン ト 値 +% 
auto 
margin margin マー ジン の 一 括 指定 実数 値 十 単位 
パー セン ト 値 +% 
auto 
margin-top marqinTop 上 下 左右 の マー ジン 実数 値 十 単位 
margin-right marginRight パー セン ト 値 +% 
margin-bottom marginBottom auto 
margin-left marginLeft 
padding padding パ デ ィ ン グ の 一 丘 指 定 実数 値 + 単 位 
パー セン ト 値 +% 
paddi ng-top paddingTop 上 下 左右 の パ デ ィ ン グ 実数 値 十 単位 
padding-right paddingRight パー セン ト 値 % 
padding-bottom paddingBottom 
padding-left paddingLeft 
width width 内 容 領域 の 幅 実数 値 十 単位 
パー セン ト 値 +% 
auto 











float cssFloat/ 浮動 (フロ ー ト ) と 回 り 込み left 
styleFloat(IE の み ) 
right 
none 
clear clear 、 回り込み の 解除 left 
right 
both 
none 
display display 表示 形式 inline 
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CSS の プロ バ パティ と と - と の リア ルー リル て 


説明 


LT の か カル 

block 

list-item 

marker 

none 
Tun-in、compact 
table、 inline-table、 
table-row-qroup、 
table-header-qroup、 
table-footer-qroup、 
table-row、 
table-column-qroup、 
table-column 、table- 
cell、 

table-caption 





overflow overflow 


は みだし た 内 容 の 表示 方 法 


visible 
hidden 
scroll 
auto 





position position 


配置 方 法 


static 





relative 
absolute 
fixed 





top top 


right right 
bottom bottom 
left left 


基準 と な る ポッ クス か ら 該 当 
要素 の ポッ クス まで の 距離 


実数 値 十 単位 


パー セン ト 値 +% 
auto 





z-index ZIndex 


要素 の 重なる 順序 





visibilty visibitity 


ボッ クス の 表示 ・ 非 表示 


visible 
hidden 
collapse 
リス ト 











Hist-style HistStyle リス ト の マー カー の Hist-style-type 
一 指定 tist-style-image 
Hist-style-position の 各 人 
Hist-style-image iistStyleImage リス ト の マー カー 画像 URI 
none 
iist-style-position iistStylePosition リス ト の マー カー の 配置 outside 
inside 
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CSS の プロ パテ ィ 
iist-style-type 


スタ イル プロ パテ ィ 


iistStyleType 


説明 
リス ト の マー カー 


値 の 指定 方 法 
disc 

dircle 

square 

decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
hebrew 
armenian 
georgian 
ik-ideographic 
hiraqgana 
katakana 
hiragana-iroha 
katakana-iroha 
none 





border-spacing 


borderSpacing 


セル の ボー ダー の 間隔 


実数 値 十 単位 





border-collapse 


borderCollapse 


セル の ポー ダー の 
表示 形式 


collapse 
separate 





caption-side 


captionSide 


キャ ブシ ョ ン の 位置 


top 
bottom 
left 
right 





empty-cells 


emptyCells 


空 セ ル の ボー ダー の 
表示 ・ 非 表示 


show 
hide 





table-layout 


tableLayout 


表 の 表示 方 法 


fixed 
auto 
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リコ ド |p) しり 





| A 

abort メ ソ ッ ド - 336.374 
abs メ ソ ッ ド ……………… - 258 
GOS2S/M) Roomtoccnooy comw260 
action プ ロ パ ティ … c ・106 
addColorStop メ ソ ッ ド sax551 
alert メ ソ ッ ド -050 
anchors プ ロ パ ティ *230 
Anchor オ ブ ジ ェクト …… の 230 
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| 記号 ) 
AN ー テ ーション ) 

- 008.009.198 
1( 斉 吾 ) 2 …022 
!=( 等 し く な い ) ーーmm…022 
"(ダブ ルク オー テー ショ ン ) 
NMM 本島 8, 10., 50, 80., 21 2 
$( ドル 記号 ) 休ま 二 で -008 
%⑦( 余 剰 ) Ha 交信 022 
(りー( ヒ BEEESAX で 7 チロ 022 
&&( 論 理 積 ) 本 O30anen5iga 022 
&( ビ ピッ ト ご と の AND) 022 
() ( 小 カ ッ 思 | EEEPCRPEPHREEEEPPERPPEEREEE 
--( デ クリ メン ト ) 
-( 減 算 ) isieiiyraiyimeier 
天 (乗算 ) PEPPY も IOYT21 い ト (7FF7T で ヤ PTW 
* ニ (乗算 ) の COCO IPC いし て 
(カン マ ) 
の SewaAccktanes "010.022.039.074.170, 
cdnommmgexzad cns 175.180.186.201.203 


< ピリオド) …………………… 012.014.168 
/( ス ラッ シュ ) ーー 175.201 
/=( 除 算 ) 











^( ビ ッ ト こ と の X0R) ………ー… 022 
_ (アン ダー バー) RSE 008 
{ (中 カッ コ ) DIGOHLLPLILLPLPCTY ヤ チャル ヤ て に FM 008 
|( ビ ッ ト ご こと の OR) "soowuc022 
上 (論理 和 ) に Sie32NeZVI3 Raguateoi 022 
<( ビ ッ ト ご と の NOT) ーー 022 


+( 加 算 ) 
++( イ ンク リ メ ン ト ) ーー 022 
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<!--ー//-->( コ メン ト ) …… ーー 004 





<( よ り 小 さ UO mt 022 
<<( 左 ジフ ド ) ……ー… ド ドド … 8 022 
9M 夫 に merafhssaGaEzsaseseieoesazassaad 022 
-= テ (減算) ……i パ ドー トル トト スル レー ドーー…… ・022 
=( 代 入 ) … 21R6POeeei 022 
0 eraapdakssaskeees 022 
*( ま 罰 内 き 0) こ etsumeoeaeooesss 022 
>=( 以 上 )…… ti 022 
>>( 右 シフ ド ) mencoreeeee・ .022 
>>>( 符 号 な し 右 シ フト ) ……………… 022 
PGIEYiCAlgiaaaUiAi5 gd 009.247 
UESSeYadesessbidcied 009,247 
181.182.186.190 
PDG5SS3HGESe3iict24ceec 009.247 

の っ つて Ci いて だ 1 で TP …346 

Sa っ 204 045 
leieGie3RIN475RHGHRdis 有 pg 412 
Sulzsskauoiaxaiaagseriaezs9E23 318 

2 045.062.116.118.346,.373.384.387 





HTTP プ ロト コル 





SVG 門 時 キ そ で て ルイ つう LC と YY ロス て YY と と いい LT) 357 
Unicode だ あ 2 の RA 203.410 
UN 060.079.199.223.226.233 
絶対 URI さい て テト ント すい トト 074 
相対 URI -074 
埋 2 天 
アク セス 履歴 …… ドド 073 
祭り に imerrrrrrr020 
アル ファ ベッ ト -200 
アン カー 情報 … -230 
アン カー 名 EID いつ EPSETCKCT で OF HmFFA 199 
位 置 情報 404406 
移動 元 の ペー ジ omo 238 
イベ ント 属性 015 
イベ ント の 発生 元 ………………… 141 
イベ ント の 情報 -141 
イベ ント ハン ドラ -015 
イメ ー ジ マッ プ …… -228 
イン ライ ン フ レー ム ……… …084 
ウィ ンド ウ ・074 
ウィ ンド ウ 位 置 078 
ウィ ンド ウサ イズ …079 
ウィ ンド ウ の 内 側 の 高 さ 080 
ウィ ンド ウ の 内 側 の 幅 -……………: 080 
ウィ ンド ウ の 人 外側 の 高 さ …………080 
ウィ ンド ウ の 外側 の 幅 -……… 080 
サジ ウイ ジ ド ウー iN07/ 
エー ジェ ント 名 …… *:211 
エス ケー ズブ 文字 sssnrrcs の 50 
エン コー ド ・250 
演算 子 上 ……| ド ドー 021 
円 問 率 il 259 
シレ ゃ "ERC 008.200.288 
オブ ジェ クト 012.037.272.300 
ナビ ゲー ター オプ ジェ クト ド -…012.412 
ビル トイ ン オ ブ ジ ェクト 012.412 
IERORRORPEHHHHEHEROOHOEEEEEEEEE 358.360 










加算 … ………021 
画像 … … 058.222 
画像 の URI Sh の pe ーー 223 
画像 の 高 さ mm mm 222 
画像 の 幅 mn 222 
画像 の 読み 込み ………………… 130.224 
関数 呼び 出し . 281 
キー コー ド … svnetA0I56 
逆 正弦 (アー ク ・ サ イン ) ……………… 260 
逆 正 接 (アー ク ・ タ ンジ ェ ント ) ……… 260 
逆 余 弦 ( ア ー ク ・ コ サイ ン ) … …-260 
キル ツジ KSes …391.392393 
協定 世界 時 ………… 189.190 
空白 … 021.201.287 
クッ キー … 064.070 
グラ デー ショ ン Soon 
繰り 返し 処理 … ・029 
クリ ウッ カジ 族 マ ツジ houomeavousne 228 
グリ ニッ ジ 標 準 時 525c198 
現 在 の 時 所 octokcrstcocctrciuteeco -185 
検索 083.202,207 
コー ド 名 emoan の 11 
コメ ント - ーー 004007 
小文字 ーー 008.200.288 
コン スト ラク タ …… ド ドド ーーー273 
コン テキ スト メニ ュー … 135 
20225 証 か erTSYHGYISGTiai3 059 

ii 079 

- 078.098.149 

NG 260 

WetIt2RaedfNiyaiBKgSDGeiSne -021 

ms 180.184.185 

RONCOPIYTCKNEKT ス よる で OTN 211 
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スク リプ ト 言 語 
スク ロー ル 

ヨー ジ 

スタ イル シー ト 
スラ イタ ダー 

数 値 入 フィ ー ル ド 
図形 

正弦 (サイ ン ) 
整数 … 

正 接 (タン ジェ ント ) 
セッ ショ ン ・ ス トレ ー 
セレ クト メニ ュー- 上 


タイ マー 識別 子 


タイ マー の 設定 
ダブ ルク リッ ク …… 
チェ ッ ク ボ ックス 
デー タ の 送信 先 


- 021 

- 247.257 

…021 

019 

P 249 
009.247.248.249.251 
081 

020 

316 

116 

116 
346.347.348.349.353 
260 

009.247 

260 

… 181 

384 

258 
-111.112.113.114.136 


4 
061 

022 

8 164 
164.165 
~-109 
106.333 


テキ スト 入力 フィ ー ル ド 


テキ スト ボッ クス 


ド ギ ュ メン ト の 出力 ………ー… ド ドー 
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138.150.156.176.184.320 


…068.124.156.320 
250 
358.360 
355 
057 
- 370.372 
060 
-060 


172 


入力 制限 gniREaiptB24c6o108a 118 
ツー ドン 300.302.304.305.306.308.322 
| は 】 
配列 Se -168,170 
パタ ー ン 文字 列 …… rp の 91 
りか ンプ ・ 413 
比較 演算 子 awet2gfeekeiet 和 の 
日 付 …180.181.182.188 
日 付 文字 列 30 059 
ピッ ト 演 人 算 子 -021 
表示 開始 位置 ・ 081.082 
表示 領域 - し 4 
ファ イル の 属性 - 378 
ファ イル の 内 容 ・374 
フォ ー カ ス 115.132 
フォ ー ム | 104,.106.108.110.120.122.126 
複合 代入 022 
浮動 小数 点数 …… 009.247 
ブラ ウザ miwaweimiees 210 
ブラ ウザ の 情報 …………… 211.216 
ブラ ウザ の バー ジョ ン 210 
ブラ ウザ の ボタ ン 083 
プラ グイ シン: Xen ・ 065,213 
プラ グイ ン の 情報 "213.218 
プラ グイ ン の 名 前 ………… 2218 
プラ グイ ン の ファ イル 名 ・ wu32213 
プラ ッ ト フ ォ ー ム っ 1 トー 211 
プロ トコ ル … ド に oo 231.332 
分 岐 処理 いつ つい すす し サト 7 5 ヤ イ イア トイ ツマ イヤ ャ すでに 035 
ペー ジ の 切り 替え 9182NSH6HG お 人 128 
ペー ジ の 読み 込み … Ocosvsxex12 昌 | 
べき 乗 "262 
変数 の 有効 範囲 …… -019 
変数 名 . …018 
ポー ト 番 号 ……… *231 
| ま 】 
マウ ス オ ー バ ー:…"" wi38 


マウ ス の 座標 ……… ド ドド mi 142 


右 ク リッ ク ………… ーーーー135 
文字 コー ドー sscsorsscssesssss203 
文字 列 …… 009.198.199.200.201.202.203 
文字 列 の 結合 Rosxeinanmuenc205 
当 多 RY mm 078.098.100 

モニ タ の 色 深 度 EELHHMA 101 

下 三 久 の 表示 汰 イイ whososso00 

モニ タ の 表示 色 5EsaSAgsall0 

モニ タ の 有効 領域 098 
ユー ザー 情報 3078 
要素 名 . 300 
曜日 atssc82 
余 族 (コサイン ) ns260 
予約 語 008 
ラジ オ ボ ポタ ン ss109i 和 3 
乱数 eaAOWigA ss < 256 
リク エス ト ヘ ッ ダ …] 340 
リセ ツ ド me 8 110 
リロ ー ド nc227 
ジグ クマ …: 228.229 
リン ク 元 1 -238 
レス ポン ス ヘ ッ ダ 339 
回 一 力 > 炊 ドレ ー ジ mm 384 
ロケ ーション 情報 … manvmwonn231 
論理 演算 子 ………… 7 "022 


APPENDIX.03 | 449 














呈 Information 

翔 泳社 の Web 辞 典 シ リー ズ の ホー ムペ ー ジ で は 、 本 書 の サン プル デー 
タダ ウン ロー ド の ほか 、 カ ラー チャ ー ト や 正誤 表 を 掲載 し て いま す 。 
ぜひ ご 利用 くだ さい 。 


サン プル デー タ は こち ら 
http://www.shoeisha.com/book/pc/dic/ 





な お 、 ス マー ト フ ォ ン か ら サ ンプ ブル デー 人 タ を 閲覧 する 
際 に は 、 右 の QR コー ド か ら ア クセ ス い た だ け ま す 。 














呈 Author 

株 式 会 社 ア ンク http:/Wwwwank.cojjp/ 

m Staff 

装丁 米倉 英 弘 (株 式 会 社 細山 田 デザ イン 事務 所 ) 
本 文 デ ザイ ン 尾花 暁 

DTP 株 式 会 社 エ スト ー ル 





ョ 翔 泳社 メー ル マ ガ ジン の こ 案 内 
翔 泳社 「SEeditors] で は 、 新 刊 案内 や コラ ム を お 届け する メー ル マ 
ガ ジ ン を 発行 し て いま す 。 ぜ ひご 登録 くだ さい 。 


http://www.shoeisha.co」jp/editors/ml 





javaScript 辞 典 第 4 版 
[HTML5 対 応 ] 
2013 年 6 月 13 日 初版 第 1 刷 発 行 





著 者 (株 ) ア ンク 

発行 人 佐々 木 幹夫 

発行 所 株 式 会 社 翔 泳社 (http://Wwww:shoeisha.cojp) 
印刷 ・ 製 本 大 日 本 印刷 株 式 会 

⑥2013 ANK Co. Ltd. 

※ 本 書 は 著作 権 法 上 の 保護 を 受け て いま す 。 本 書 の 一 部 また は 全部 に つい て ( ソ 
フト ウエ ア お よび プロ グラ ム を 含む ) 、 株 式 会 社 翔 泳社 か ら 文書 に よる 許諾 を 得 
ず に 、 い か な る 方 法 に お いて も 無断 で 複写 複製 する こと は 禁じ られ て いま す 。 
※ 本 書 へ の お 問い 合わ せ に つい て は 、ii ペ ー ジ に 記載 の 内 容 を お 読み くだ さい 。 
※ 落 丁 乱 丁 は お 取り 替え いた し ます 。03-5362-3705 ま で ご 連絡 くだ さい 。 


ISBN978-4-7981-3160-3 Printed in JAPAN 

















次 世代 規格 の Web 辞 典 
改訂 第 2 版 ! 


HTML5 5 HTML5&CSS3 辞 典 
&CS53@ 0 


(株 ) ア ンク 著 
ロ 定価 2.520 円 (本体 2.400 円 + 税 ) 
ーー 日 対応 ブラ ウザ :Intemet Explorer 1079、 
- 朋 sa | Firefox、Google Chrome、0pera、Safari、 
iPhone 標 準 ブラ ウザ 、Android 標 準 ブ ラウ ザ 
対応 0S:Windows 8、Mac 0S X 10.8、 
i0S 6/5、Android4.2/4.1 


Web ペ ー ジ の 
構造 ・ デ ザイ ン ・ 動 き を 1 冊 で ! 


ロコ ホー ムペ ー ジ 辞典 


HTML・CSS・JavaScript 


ISBN978-4-7981-2519-0 

(株 ) ア ンク 著 

定価 2.100 円 (本 体 2.000 円 + 税 ) 
対応 ブラ ウザ :Internet Explorer 978//、 
Firefox、Google Chrome、0pera 11、Safari 5 
対応 0S:Windows 7/Vista/XP、Mac 0S X 





CONTENTS 
JavaScript の 基礎 知識 第 3 部 | オブ ジェ クト 一 覧 


第 1 部 


第 2 部 





JavaScript リ ファ レン ス 


ダイ アロ グ 
ドキ ュ メ ント 
ウィ ンド ウ 
スク リー ン 
フォ ー ム 
イベ ント 
タイ マー 
配列 

日 付 
文字 列 
ブラ ウザ 
画像 

リン ク 

ヒス トリ ー 
変換 

数 学 関数 
オブ ジェ クト 
関数 

正規 表現 
DOM 
非同期 通信 
図形 と メデ ィ ア 
ファ イル 操作 
ロー カル デー タ と オフ ライ ン 
位置 情報 
文法 ・ コ ア 


付録 

スタ イル プロ パテ ィ 一 覧 
JavaScript イ ン デ ックス 
用 語 イ ン デ ックス 








9784798131603 


1923055023000 








































































































ISBN978-4-7981-3160-3 
C3055 \2300E- 


株 式 会 社 半 泳 社 
定価 : 本 体 2.300 円 + 税 


Java 
SCTipt 


Le 


(株 ) ア ンク 著 


HIML: 








we 
ULULUI 


SHOEISHA 


